How to make a background header image extend to full width of browser
Question
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.
(ie 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;
}
3 answers
solution1
3 ACCPTED 2016-05-13 08:09:15
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:
Hope it helps. If you have any questions please tell me.
solution2
1 2016-05-13 08:13:11
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;
}
solution3
0 2016-05-13 08:11:12
Or you can use the background property
<style>
/* basic reset */
* {margin: 0;padding: 0;}
.header {
background: url('Images/bakemock.jpg') no-repeat; /* you may also change the URL */
background-size: 100% 100%;
width: 100%;
display: inline-block;
height: 200px; /* you may also change this */
}
</style>
<header class="header"></header>
absolutely no spaces and gaps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.