2 Replies - 316 Views - Last Post: 02 July 2019 - 01:29 AM

#1 dennisr1998   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-June 19

image as entire background

Posted 27 June 2019 - 12:48 AM

Hey everybody!

I am currently working on creating a website with HTML & CSS.
The intention is that an image will come as the entire background.

The image does contain text, but here something needs to be added.
When I add the text, it is displayed correctly on the computer. If I open it on a mobile or I resize the browser the text jumps (h2 in html). I've been doing this for a long time

The text must be placed between 2 lines of text that are standard on the image.
I want this to work for all resolutions. Is that possible at all?

Do you have any tips on how to properly secure the text?
Hereby my code:

<! doctype html>
<html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<head>
<meta charset = "utf-8">
<title> </title>
</head>

<body>

<style>
body
{
text-align: center;
overflow-y: hidden;
overflow-x: hidden;
width: 100%;
margin: 0 car;
padding: 0px;
font family: helvetica;
background color: # 000000;

background: url () no-repeat center center fixed;
background size: 1000px;
width: 1000px;
height: 1000px;
background color: # 000000;
}
#wrapper
{
text-align: center;
margin: 0 car;
padding: 0px;
width: 700px;
}
h1
{
margin top: 225px;
color: white;
font size: 20px;
font weight: bold;
}
h2
{
position: absolute;
top: 58%;
left: 50%;
transform: translate (-50%, -50%);
font size: 16px;
font weight: bold;
color: white
}
</style>


<div class = "container">
<div class = "row">
<div class = "h2">
<h2> CLICK <a href=""> HERE </a> SEE OUR OPENING HOURS AND <br>
OTHER INFO


</div>
</div>
</div>

</body>
</html>

This post has been edited by andrewsw: 27 June 2019 - 02:10 AM
Reason for edit:: added missing [code][/code] tags


Is This A Good Question/Topic? 0
  • +

Replies To: image as entire background

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6823
  • View blog
  • Posts: 28,277
  • Joined: 12-December 12

Re: image as entire background

Posted 27 June 2019 - 02:14 AM

First fix your HTML and CSS.

There should be no space between ! and DOCTYPE,
CSS issues with font size and weight, background size, etc.
H2 tag is not closed.

HTML Validator

CSS Validator

Also use a descriptive title for your topic, every topic could be "HTML and CSS help needed :(". I have edited it for you.
Was This Post Helpful? 0
  • +
  • -

#3 codyhay   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 5
  • Joined: 02-July 19

Re: image as entire background

Posted 02 July 2019 - 01:29 AM

Simple mistake like these cost hours & hours of debugging work. I too usually forget to close tags in the past.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1