I´m a CSS beginner. I´ve got two separate containers which should have one background image. I'm using z-index but I don´t know how to make it work.
<!-- Background Image -->
<div class="bg-img"><img class="img-responsive" src="images/bg/bgtriangle.png">
<!-- First Container -->
<div class="container-main">
<p class="font-relative">Headline 1</p>
</div>
<!-- Second Container -->
<div class="container-fluid" style="background-color: #574c5d; border-top: 2px solid #e57e22;">
<h4 class="text-center" style="padding: 5px;">Headline 2</h4>
</div>
</div>
The CSS is:
.container-main {
width: 100%;
height: 100%;
padding-top: 70px;
padding-bottom: 15px;
background: #453a4b;
background-size: cover;
z-index: 1;
}
.container-fluid {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
z-index: 0;
}
How can I use this one bg-image in full width for two containers? Is that possible?
You need to set your image to the background-image of your bg-img instead of adding it as an HTML img element. Also, you do not need z-index at all for this - they can be removed from your CSS.
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('images/bg/bgtriangle.png'); /* This */
}
EDIT:
If you want to move the background of the divs behind the background image, while keeping the content above it, you are going to get into a bit of a messy situation. You can do this by removing the contents from the divs, and then positioning all of them as absolute and using z-index (-1 behind image and 1 in-front of image). However, this means that you have to use top/left/etc. to position the contents back into their divs.
Here is a demo of what I accomplished tinkering a bit, maybe it will be helpful to you.
Related
I would like to define the background image for whole table with DNA image and I want to use default color gray for whole table but some of columns I need with white color.
If I try to override the background color, the DNA image is gone.
I have tried this one with bootstrap:
HTML:
<div class="container mt-3">
<div class="row">
<div class="col-6 col-white">col1</div>
<div class="col-6 col-white">col2</div>
</div>
<div class="row">
<div class="col-6">col3</div>
<div class="col-6">col4</div>
</div>
</div>
CSS:
body{
background-color: yellow;
}
.container{
background-color: gray;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna%20(1).png');
background-repeat: repeat-y;
background-position: 50px 0;
}
.col-6 {
padding: 20px;
}
.col-white {
background-color: white;
}
Demo: https://jsfiddle.net/6sugwzbh/2/
Currently:
Expected:
How can I override only background color, but not background image as well?
You could just add the DNA as a repeating background to an after pseudo element on the container, positioning it just to the right a bit.
This will go over everything without affecting anything else's positioning.
You need to set the position of the container though so that its pseudo element can position itself in relation to that.
Add this to the CSS:
.container::after {
content: '';
position: absolute;
left: 50px;
top: 0;
width: 30px;
height: 100%;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna%20(1).png');
background-repeat: no-repeat repeat;
background-position: center center;
}
and add position: relative to the .container but remove the background-image from there.
I have two images which get overlayed on top of each other in my application, these are represented as foreground and background. For both of these I'm using background-attachment: fixed to make sure the images are always the exact same size as each other. This allows me to add an edited version on the foreground, but still keep the two images consistent so they both look like one.
You can see an example of this below;
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
The issue I'm having is that I have a need to zoom these images in on an animation. To do this I'm using transform: scale (1.5) on a keyframe, but the more it scales, the more out of sync the two images get. I expect foreground to be scaled the exact same as the background as they are on the same plane due to background-attachment: fixed, but I'm guessing the required height and margin properties cause some issues.
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
transform: scale(1.5);
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
Is there any sort of solution to this? I want example 2 to look like example 1, just more zoomed in.
https://jsbin.com/nesekuxuyu/1/edit?html,css,output
See my jsbin.
Remove your foreground specific styling and add overflow: hidden; to the parent container. It was scaling properly however it was exceeding the bounds of it's parent container and by hiding the overflow you prevent it from distorting the bits you can see.
Edit In outside discussion with James I see the actual issue and am working on an appropriate solution. Scale is overridng the fixed behavior inherent in background-attachment
I want to link an image url to a div so that image will be used as a background and watermark for the content within the div.
When I set the url to the body, it repeats the image, which i dont want.
<body style="background-color: white; background-image: url(https://preview.ibb.co/ntRarR/watermark3.png);">
...
</body>
And when I set the url within the div (where i want it and which is inside the body tag), the image does not appear.
<div style="background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center">
...
</div>
Any advice is greatly appreciated.
Thanks
use this way for image opacity
.bgdiv {
position: relative;
z-index: 1;
width:450px;
height:450px;
}
.bgdiv .bg {
position: absolute;
background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
background-size:100%;
opacity: .4;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="bgdiv">
<div class="bg"></div>
...
</div>
for body use
background-repeat:no-repeat;background-size:cover;
body{
background-image: url(https://preview.ibb.co/ntRarR/watermark3.png); text-align: center;background-repeat:no-repeat;background-size:cover;}
Make sure your div is not empty.
Use property
background:url('https://preview.ibb.co/ntRarR/watermark3.png');
to give background for your div.
If you apply background property to body tag, it will be applied to the
entire webpage.
In case you want to apply background image to the body tag, use
background-size: cover; (cover the entire page).
I'm trying to make a background image on the header section autosize but it won't keep to aspect ratios. Here is an example, the image gets the bottom of it cut off: http://i.imgur.com/sxedPHI.png or if I make it this size, space appears between it and the divs below header: http://i.imgur.com/xX1e4GZ.png I can almost seem to get it working but then it scales the picture to an odd aspect ratio and the image gets distorted: http://i.imgur.com/jtxDNr0.png
I would like the header section to be the EXACT same size as the image, then have the image always showing all of the image (not cutting off a portion) and no space between header and the next divs.
This is the code I have for the HTML part:
<header>
T
</header>
I believe this is the relevant CSS:
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-image: url("ball.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-size: 100% auto;
}
The site in question is here:
http://www.stoppiefail.com/boot/sites3/index.php
You are using background-size: 100% auto; at the end which will be overwriting your previous code.
https://jsfiddle.net/26ejdss6/1/
div{
width:400px;
height:187px;
background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
background-size:cover;
background-position:center;
}
Also, check out a neat plugin named backstretch.js. It's pretty nice for this kind of thing, especially when auto-sizing user added images in a CMS
http://srobbin.com/jquery-plugins/backstretch/
Instead of using Background Image why not use an IMG tag with an absolute div on top of it.
HTML:
<header>
<img src="your/background/image.jpg" class="bg">
<div class="headerContent">Your Header Content Goes Here</div>
</header>
CSS:
header {
width: 100%;
position: relative;
}
header img.bg {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
header .headerContent {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
I havn't tested this but it is just another way to do this outside of css, that would allow the height of the header never to be cut off.
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.