I have a background image that I want to show after the top header. This image should be on the remaining of the page. At later stage I can even have a footer and the image should take up the whole empty space between the header and the footer. I am trying to have this background image in the empty space so that on top of the image I can have my div's that show content etc.
I was successful in achieving this when I simply put the image in the body background, however, now I want the background image AFTER the top header ended.
Example: http://jsbin.com/opokev/2
CSS:
.backgroundimage {
background: url(http://s1.postimage.org/ur0h52mvy/Sketch2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div#masthead {
background-color: #262626;
height: 85px;
padding: 0;
position: relative;
width: 100%;
z-index: 500;
}
HTML
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
<div id="masthead"></div>
<div class="backgroundimage"></div>
</body>
You can set your image as the body's background-image, with an offset for the header, like this:
body {
background-image: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg');
background-position: 0px 85px;
background-repeat: no-repeat;
}
div#masthead {
background-color: #262626;
height: 85px;
padding: 0;
width: 100%;
margin: 0;
}
body { background: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg') no-repeat; background-position: 0px 85px; }
Related
So you'll see in my example, I have a gradient applied to html and a texture overlay .png on body which at first looks as expected.
I added a div with a large height to show my issue. Notice as you scroll down in the example you see the div overflow body and the texture overlay applied to body gets cut and almost has a parallax effect.
What I want is the html/body backgrounds to stay fixed so the content of body will scroll over them as expected while the gradient and overlay stay stationary and the size of the window. I'm thinking you'll notice what I'm talking about pretty easily with the example.
What am I missing here?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
html {
background: radial-gradient(#bcd197, #325757);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
outline: blue 3px dashed;
background-image: url("https://i.ibb.co/NFvCfrj/texture.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
div {
outline: red 3px dashed;
height: 200rem;
width: 10rem;
background-color: rgba(0,0,0,.5);
margin: 1rem;
}
<div></div>
You're setting the body's height to 100%, so the background no longer render below the initial viewport height.
You must set the same div height to the body or mark body height to auto (default value).
html {
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
body {
height: auto;
width: auto;
}
html {
background: radial-gradient(#bcd197, #325757);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
outline: blue 3px dashed;
background-image: url("https://i.ibb.co/NFvCfrj/texture.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
div {
outline: red 3px dashed;
height: 200rem;
width: 10rem;
background-color: rgba(0,0,0,.5);
margin: 1rem;
}
<div></div>
I am editing a website template that has the homepage background image inserted in the CSS. The image is not responsive on mobile. The CSS points to a specific section and not the specific image. So I am guessing that is why it is not working. But I don't know how to point the responsive CSS to the image when it is in CSS and not HTML. How can I make the image responsive? Thanks!
```
#slider {
background: url("../img/helloquence-61189.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
width: 100%;
height: auto;
}
```
Try this
#slider{
background: url("../img/helloquence-61189.jpg") no-repeat;
background-size: 100% 100%;
}
Use background-image:contain instead of cover
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#slider {
background: url("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg") no-repeat;
background-size: contain;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
width: 100%;
height: auto;
}
</style>
<div id=slider>
</div>
</body>
</html>
Try this one
#slider {
background: url("../img/helloquence-61189.jpg") no-repeat;
background-size: 100% 100%; background-attachment: fixed; background-
position: center center; position: relative;
width: 100%;
}
I have a image with the size of 320 * 436 and some particular text data. I need to implement the webpage with the background image as stretch and fit to the screen and the text over the screen. Please help me to implement this using HTML and CSS. Below I have mentioned the code that I have tried. But it does not works:
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<html>
<head>
</head>
<body>
<div class="container">
<img src="background.png">
<p>Data</p>
</div>
</body>
</html>
Thanks in advance
You can achieve this by setting your image as a CSS background image with background size set to cover.
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
This will stretch your image to cover the screen, you can then position your text over it.
body {
background: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center fixed;
}
I'm trying to make my background from website so if I'll go to mobile it will stretch it by height in center.
Something from that: large screen to that small screen
my code is:
body{
background-image: url("Tie_logo_shaders.jpg");
background-color: black;
background-size: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Try this code
.bg-img{
background: url("https://s-media-cache-ak0.pinimg.com/originals/27/3e/43/273e43a71854d8359186ecc348370f8d.jpg") no-repeat center center;
min-height: 100%;
position: relative;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
<body>
<div class="bg-img">
</div>
</body>
What I need (and failed) to do is website like in this picture:
Website need to be full screen and no scroll.
I'm not satisfied with results, because:
-when website is opened on vertical screens (smartphones) the bottom border is too big
-I also tried to make this background image to show fully top and bottom (I want to faces at top and bottom to be seen in full, not just partly), but I don't really know how to do it.
My CSS code:
html
{
background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;
}
body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Ok, the border problem is solved by #imGaurav with such a code:
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
But I still can't figure out how to make both top and bottom faces to be visible.
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
So you just want the full size image to scale with different with different screen sizes?
In your css on the image div try:
background-size: contain;
If that is not what you are after, here is a link to all the property values you can use and test out.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add below CSS to your HTML body
position: absolute;left: 0;top: 0;
Did you mean somethink like that?
<div class="vertical-container">
<div class="vertical-middle">
<img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
</div>
</div>
html,body {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertical-container {
background-color: green;
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.vertical-middle {
height: 100%;
vertical-align: middle;
display: table-cell;
}
https://jsfiddle.net/org72bfb/1/
You can use the following css to solve the problem. Reference CSS-trick
html {
background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}