How to make a background header image extend to full width of browser

html css image header width

21,297

Solution 1

These lines:

<head> 
   <div class="splash_img">
     <img src="Images/bakemock.jpg" alt="bake"/>
   </div>
</head>

Cannot work.

You cannot put html elements like <div> <img> and many others inside the <head> tag. Your builder tags should be inside the <body> only. And the <body> cannot have a <head> tag inside it.

Two possibilities

If this section is inside the <body> and is not refering to the <head> above the <body> then change it to <header> or something like that
If this section is above the <body> delete the html elements inside it and put a <header> tag inside your <body> section

A valid HTML should look something like this:

<!DOCTYPE html>
<html>
<head>
   <title>Some title</title>
   <!-- meta tags, js scripts, css styles etc -->
</head>
<body>
   <!-- div tags, spans, imgs, etc are ok -->
   <!-- but you cannot put a <head></head> tag here -->
</body>
</html>

Also important note

You cannot put background-image: and specify more than the background image src itselt. If you want to specify more than the source use background: instead

background: url("/Images/bakemock.jpg") no-repeat center;

The last thing is of course the default paddings/margins that the browsers give to the <html> and <body> tags that you should override:

html, body {
   padding:0px;
   margin:0px;
}

In conclusion

This code will work for you

<!DOCTYPE html>
<html>
<head>
    <title>Some title</title>
    <style>
        header {
            background: url("/Images/bakemock.jpg") no-repeat center;
            background-size: 100% 100%;
            height: 630px;
        }
        html, body {
            padding:0px;
            margin:0px;
        }
    </style>
    <!-- meta tags, js scripts, css styles etc -->

</head>
<body>
    <!-- div tags, spans, imgs, etc are ok -->
    <!-- but cannot put a <head></head> tag here -->
    <header>
    </header>
</body>
</html>

You can see it also here:

JSFiddle

Hope it helps. If you have any questions please tell me.

Solution 2

You can do like this:

HTML:

<div class="splash_img">
    <img src="Images/bakemock.jpg" alt="bake"/>
</div>

CSS:

.splash_img {
  background: url(Images/bakemock.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

21,297

Author by

Jen

Updated on May 14, 2020

Comments

Jen about 4 years

Still learning how CSS works. At the moment I'm trying to make a background image cover the entire header without any gaps on the top/right/left sides.

I have tried several other options and I can't seem to get this image to move.

(i.e adding in html but I want to keep that separate from that file. I have also tried making the margins 0)

<!--EXAMPLE1-->
.splash_img {
background-repeat:no-repeat;
background-position: center top;
display:block;
margin:0px auto; 
}

<!--EXAMPLE2-->
.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px; 
}

It continues to stays on the top right corner of the browser. Currently this is what I have.

<head> 
    <div class="splash_img">
        <img src="Images/bakemock.jpg" alt="bake"/>
    </div>
</head>

.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px;
}

Jen about 8 years

This method did not work. The image still stayed on the top right corner. Thank you for letting me know about the tags that weren't suppose to be there, didn't know about that.
Jaqen H'ghar about 8 years

@Jen you are absolutely right. Its a weird thing because I really believe I edited my message and apparently not. Anyway, I edited it again now and added some more things. If you want you can check it out again now. Hope it helps :)
Jen about 8 years

Well I copied what you had up there and it still didn't work. But I did tweaked it. I saw that you had style tags referencing the header/html/body. then noticed there wasn't a <img src> within the <header>tag. So I added it. The image did change but I am left with the image repeating.
Jaqen H'ghar about 8 years

@Jen does the JSFiddle work for you? Maybe I didnt understand what you want to achieve
Jaqen H'ghar about 8 years

@Jen as I understand from your question, you want a header with a background, that stretches all over the width of the page. To achieve this you should not put a <img> element inside the <header>. You only have to style the header with a background-image. If this is what you wanted, take a look at the JSFiddle I put in the answer, and see if it is ok. If this is ok then the code I posted should also work. If it doesnt work maybe you need to change the background url path to your images library. You can test it by putting the background url path from the fiddle. Hope it helps :)
Jen about 8 years

I was able to get it to the size/look I want! thank you very much for the help, I've been trying to get this to work for the past two days-you have been much great help! I have a few more questions to have a better understanding of what is going on. Is the empty <header> tag within the body serves as a placement when the page loads? And the <style> is placed within the <head> tag in order or priority for the page to load first before reading the rest of the document? I was a little confused at first, I thought the <header> required text to work.
Jaqen H'ghar about 8 years

@Jen 1) The empty <header> is not a placement. It is a container. This container have a background picture stretched all over it, and you can put elements inside this container. This is just like using a <div> but with a more meaningful name. 2) The <style> is placed within the <head> is an HTML rule. Just like a <div> <img> etc cannot be placed inside the <head> 3) If my answer solved your question please accept it :) When and How to accept an answer 4) If you have any more questions I will be happy to answer :)