I have written the following code and I simply cannot understand why the image I have setted to be on the background doesn't strech vertically to cover the full page .
I would appreciate your help
html{
height: 100%;
overflow-y: scroll;
}
html:after{
margin-bottom:0;
content : "";
background: url("../images/van1.jpg") no-repeat center center;
background-size:cover;
width: 100vw;
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: -1;
}`
Using html:after is like adding a child inside <html> beside your <body> tag, it's not valid and browsers may not render it correctly, it's better using body:after and set height: 100% so it covers your page.
Related
I have created an ID for my HTML body called #indexbody. I put a background image with CSS using background-image:url("hs2.webp");. Because I Have done it this way, is there a way to change the background opacity of my image without dimming the entire body?
CSS:
#indexbody{
background-image:url("hs2.webp");
background-size: 100% auto;
}
If you put the background-image on the before pseudo image rather than the actual body element you can set its opacity down without that affecting the whole body element.
Here's a simple snippet:
body {
width: 100vw;
min-height: 100vh;
margin: 0;
}
body::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
opacity: 0.4;
position: absolute;
}
<body></body>
There are many different ways to do this. One of the most common is using a pseudo-element. In this case, I used :after to create the background color overtop of the picture then used z-index to make sure my absolutely positioned text elements are layered ahead of the pseudo-element.
#indexbody {
background-image: url("https://dummyimage.com/600x400/000/fff");
/* background-color: rgba(0, 0, 0, .5); --> solution without using psuedo-element */
background-size: cover;
background-position: center;
width: 100%;
height: 500px;
position: relative;
}
#indexbody:after {
content: "";
position: absolute;
background-color: orange;
opacity: .5;
inset: 0;
}
p {
position: absolute;
color: white;
background-color: blue;
z-index: 1;
text-align: center;
}
<div id="indexbody">
<p>absolutely positioned element overtop, unaffected by opacity</p>
</div>
Using the :before or :after CSS pseudo-elements, you apply the div with a background image and set an opacity on it.
Hey there I am building a website! I'm trying to make the background-image to fit the whole div.section. I tried height: 100%; width: 100%; but it did not work. I need some help.
The part of the code which needs to have the background image:
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
}
My complete code on JSFiddle: https://jsfiddle.net/2Lqxqw10/ (Make sure to make the width of the result maximum) or another link: https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html
Thank You in Advance!
You can use absolute position with a proper z-index, it could also works :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
See it here
Width and height set the proportions of your div. To set the size of the background, you need the css property background-size:
.section {
background-position: 0 0; // start from top left
background-size: 100% 100%; // expand to 100% in both directions
}
You need to set a certain height to your section e.g :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 500px;
width: 100%;
}
fiddle
Currently .section is null or no data in it
put some data in it or give some specific height to the .section to view section
Add position absolute to the .section class.
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position absolute;
}
https://jsfiddle.net/2Lqxqw10/6/
I', hoping this makes sense but I have HTML code that I have a child which is an svg animation, I'm wanting to have the section responsive so that the position of the svg stays where its meant to be on the map.
I have selected the coast of Africa as a point that I want to keep the SVG in place when the page is resized, but when it is resized you will see that the red marker moves across the rest of Africa.
You can see the jsFiddle for the Source Code and see the result to the full map.
.about-header__map .angola {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-header__map .angola svg {
top: 49%;
left: 42.5%;
position: absolute;
}
Use the width of the image (1440px) instead of width:100%
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
width: 1440px; /*here */
background-size: cover;
height: 500px;
position: absolute;
z-index: -1;
}
FIDDLE
Use a fixed width in .about-header__map
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
background-size: cover;
height: 500px;
position: absolute;
width: 1500px;
z-index: -1;
}
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed