I have a background image which covers the full width and height of the browser. When opening the html file on a smaller screen, only the left side of the image is visible.
What I want is to scale and center the image on the background. What do I have to change in my css code?
div#background-content {
position: relative;
}
div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-size:cover;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
you can add this code in your css:
div#background-content:after {
background-size:contain;
background-position:center;
}
CSS background-position:
background-position: center;
add background-position: center;
i recomended to you use background:url('./images/sunrise.jpg') no-repeat center;
div#background-content:after{
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-position: left -206px top -95px !important;
background-size: 320% 110% !important;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
Related
This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 2 years ago.
I am trying to have a large header where there is a background photo and then a solid color overtop it with a opacity of like 90%. (so you can barely see the photo).
This is basically what I have:
.bgoverlay {
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
background-color: #053426;
min-height: 60%;
opacity: 0.9;
}
<header class="bgimg-1 bgoverlay"></header>
edit
Thank you everyone - adding the :before is so far working out nicely. Although, when it comes to responsive, is there a way to change the background size? I tried background-size but it isn't changing.
For example, if I have the min-height at 70% so the whole header takes up 3/4th of the page but then when I shrink it to mobile size the solid background color is revealed below and the photo is small and not large enough to cover the 71% min height.
Thanks
edit 2
nvm I ended up using an #media screen to just shrink the overall header on mobile and now it looks great. Thank you!
You can use a pseudo-element like :before.
First, add position: relative to the header element. Then, add the pseudo-element absolutely positioned with the color and opacity, occupying the whole width and height of its parent (header).
header {
width: 100%;
height: 300px;
}
.bgoverlay {
position: relative;
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 60%;
}
.bgoverlay:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.9;
background-color: #053426;
}
<header class="bgimg-1 bgoverlay"></header>
hope this help you.
.bgoverlay {
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 300px;
position: relative;
}
header.bgimg-1.bgoverlay:after {
content: '';
height: 100%;
width: 100%;
background: #000;
opacity: 0.9;
position: absolute;
}
<header class="bgimg-1 bgoverlay">
</header>
Use a really large inner box-shadow if the solution by Azametzin doesn't pan out for you (relative positioning might get tricky with your content). But please use their solution as a real one, and maybe mine as a fallback. It is a bit hacky after all.
header {
width: 100%;
height: 300px;
}
.bgoverlay {
position: relative;
background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
box-shadow: inset 0 0 0 100vmax rgba(2, 20, 15, 0.9)
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0px;
background-size: 100%;
min-height: 60%;
}
<header class="bgimg-1 bgoverlay"></header>
This might be a rookie question, but I can't find an answer anywhere. I'm writing a website with parallaxed background images and want to make said images a bit transparent as opposed to the text above them, which should be completely opaque. I followed w3school's model (with some changes) and it works considering that background image is defined in the parent container, so the text inherits the image's opacity, as seen in bgimg-2.
What I've tried to do, appart from fiddling with the stylesheet to no avail, is to create a new container section-img that encapsulates both the background and the text, so their styles don't overlap with each other. This, however, makes the image's (bgimg-1) height equal to 0.
Here's an MRE:
<!DOCTYPE html>
<html>
<style>
body, html {
height: 100%;
margin: 0;
background-color: #282828;
font-family: sans-serif;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.section-img {
position: relative;
min-height: 100%;
}
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.bgimg-2 {
position: relative;
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
#title {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: white;
font-size: 7vw;
letter-spacing: 2vw;
}
.section-text {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
font-weight: bold;
color: white;
letter-spacing: 2vw;
font-size: 3vw;
color: #f7f7f7;
}
</style>
<body>
<div class="section-img">
<div id="title">No background picture here!</div>
<div class="bgimg-1"></div>
</div>
<div class="bgimg-2">
<div class="section-text">I want different opacities :(</div>
</div>
</body>
</html>
What's the sanest way to achieve this difference in opacities for both items?
Why Don't you use "rgba" style(CSS input), "rgb" will set the colour of the background and the "a" command will set the opacity (transparency) of the image, it can be set between 0-1 where 0 is transparent(0% opacity) and 1 is 100% opacity. i hope this helps!!
.bgimg-1 {
background-image: url("https://i.redd.it/v3wjcf1p59841.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
// z-index: -1; // you won't need this
// add position relative so that the ::before position absolute will be in relation to it's parent and not the body:
position:relative;
}
// .bgimg-2 { // don't need this div
.bgimg-1::before { // add this instead
// position: relative; // no this instead:
position: absolute;
top:0; left: 0; right: 0; bottom: 0;
// end this instead //
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.redd.it/o1a3xr4b39841.jpg");
min-height: 100%;
}
My background image isn't showing and I can't figure out why. I've already read through a few other threads but none of the suggestions are working.
The path to the background image is correct, that's not the problem. I've added a height and size/position etc.
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("links/slideshow/_anx_tote2.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
The background image should cover the right half of the screen.
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
width: 100%;
background-image: url("https://picsum.photos/200");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
You need to add 100% height for body and HTML.
The image doesn't show because there was no width and height set to #slideshow.
Adding percentage height to a div, a height has to be determined first.
For more information, you can see here.
Thus I have added height: 100vh; and width: 100% to #slideshow;
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("https://i.imgur.com/WLimwqR.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100vh;
width: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
#slideshow {
background: url(links/slideshow/_anx_tote2.jpg) no-repeat transparent;
background-size: cover;
height: 100%;
}
Okay, my website is like 95% there. And I'm absolutely stumped as to why I can't see them.
Everything works on it except that three images won't display after publishing through my cPanel. The files that won't load are Layer4.png, Layer3.png, Layer2.png
All the naming is correct between image and css url reference. The images are not corrupt or damaged, I checked. Everything is in the right directory. The code is the same for each layer, only file names are unique. There's a bit of java script that creates a parallax between each layer, but I don't think that would matter since only three layers are affected but use the same code.
Any ways to troubleshoot this?
.layer-0 {
top: 40px;
z-index: 5;
background:-webkit-linear-gradient(#f90, #FC0);
}
.layer-1 {
top: 100px;
z-index: 5;
background-image: url("images/Layer4.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-2 {
top: 100px;
z-index: 10;
background-image: url("images/Layer3.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-3 {
top: 100px;
z-index: 15;
background-image: url("images/Layer2.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-4 {
top: 90px;
z-index: 20;
background-image: url("images/Layer1.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-5 {
top:105px;
z-index: 25;
background-image: url("images/Layer0.png");
background-position: bottom center fixed;
background-size:100%;
Based on the code you posted you are missing a relative container for your elements if you want them to be absolutely positioned, and you need content in the divs or to size them statically, see this example, I used a placeholder image for layer-5 to show you this:
.layer-0 {
top: 40px;
z-index: 5;
background:-webkit-linear-gradient(#f90, #FC0); }
.layer-1 {
top: 100px;
z-index: 5;
background-image: url("images/Layer4.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-2 {
top: 100px;
z-index: 10;
background-image: url("images/Layer3.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-3 {
top: 100px;
z-index: 15;
background-image: url("images/Layer2.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-4 {
top: 90px;
z-index: 20;
background-image: url("images/Layer1.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-5 {
position: absolute;
top:105px;
z-index: 25;
background-image: url("http://placehold.it/500x500");
background-position: bottom center fixed;
background-size:100%;
outline: 5px solid orangered;
height: 500px;
width: 100%;
}
.relative {
position: relative;
}
<div class="relative">
<div class="layer-5"></div>
</div>
I'm trying to show a picture as the background of my website so I'm using the following code
HTML:
<div>
<img src="images/background.jpg" id="bg" alt="background_image" />
</div>
Css:
#bg {
width: 100%;
height: 75%;
position: absolute;
z-index: -5000;
}
I was wondering how can I put a limit on how big is the background going to get because I don't want it to stretch more than 2000px.
Thanks
Just include max-width in your CSS.
#bg {
width: 100%;
max-width: 2000px;
height: 75%;
position: absolute;
z-index: -5000;
}
I would use the following css:
html {
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;
}
and remove your div entirely.
To limit the size you can:
#bg {
min-height: 100%;
max-width: 2000px;
width: 100%;
height: auto;
position: fixed;
top: 0;
bottom: 0;
}
You can use max-width
#bg {
width: 100%;
height: 75%;
position: absolute;
z-index: -5000;
max-width: 2000px; /* use this to limit the maximum width */
}
I haven't tested it, but add max-width:2000px; to your #bg selector.
try this
#bg {
width: 100%;
height: 100%%;
background-size:100%;
}