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).
Related
My background image is not covering all contents on my page, rather it's applying only half of the screen.
The same code with same image is properly working on my another page.
Only the difference is that i have a lot of content on this page but i think that doesn't matter.
Where is the issue?
Thanks in advance.
html
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
css
#main {
position: relative;
}
#main:before {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url(../..//images/3.jpg) center center fixed;
width: 100%;
height: 100%;
opacity : 0.2;
filter: alpha(opacity=20);
z-index: -1;
try this code
background-size:100% 100%;
Hi, you just try with following CSS snippets
background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;
This method will work
body
{
margin:0px;
width: 100%;
height: 100%;
}
#main {
background-image: url('download.jpg');
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows.
It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.
To make the image applicable to your whole body try this:
body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}
And remove your psudeo element :before
#main {
position: relative;
/*Other CSS Properties*/
}
try this one
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
I guess you have missed a double quote while writing your ID.
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
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 saw some similar questions regarding this. But my approach is different and none of those works to me. That's why I'm posting this.
I want to change the opacity of background image without changing the opacity of child elements, where background-image is loaded inside the body tag.
html :
<body>
<div id = "background-div">
<div class = "header">
<div class = "ham-icon">
<img src = "images/ham-icon.png">
</div>
<div class = "logo">
<span class = "google-logo">Google</span><span class = "hangouts-logo"> Hangouts</span>
</div>
<div class = "profile-data">
</div>
</div>
<div class = "body">
</div>
</div>
</body>
css:
body
{
position: relative;
background: url(../images/back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
HTML Background with BODY filter
<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)
html, body {
height:100%;
padding: 0;
margin: 0;
}
html {
background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
}
body {
background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */
}
Using CSS pseudo selector :before for body
Another way is using the pseudo selector for body, which can be a "layer" behind the actual body that can get the opacity property without affecting other elements.
html, body {
height:100%;
padding: 0;
margin: 0;
}
body:before {
background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
display: block; content:""; position: absolute; z-index:-1;
top:0; left: 0; right: 0; height: 100%;
opacity:.5;
}
You can try the following workarounds:
1) use an image which already has an alpha channel, such as png;
2) have the background div ad a sibling and not as a parent of the other elements, and change their position with css, such ad position:absolute; z-index; and so on.
3) if your image only consist in colours, you can leave your html untouched and use rgba/css gradients
You can put the background to a separate <div>:
<body>
<div id="content">
<div id="background-div"></div>
<!-- content -->
</div>
</body>
Then position and style to fill the entire content.
#content {
positon: relative;
}
#background-div {
position: absolute;
width: 100%;
height: 100%
opacity: 0.5;
background: url(...);
}
use direct child selector
body > .backgroudimg{
blah blah
}
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.
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.