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>
Related
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 am attempting to build a, simple, single page website with only css as an exercise to familiarize myself with css.
I have three background images stacked on each other. Each image is set to a height of 100vh. This gives each image a nice look but I tried using the 'top' attribute to place text in the middle of the page, the text didnt move.
Can someone tell me why 'top' doesnt work in this circumstance? And a way to get around it?
This is my CSS:
#page1 {
background-size: cover;
background-image: url('Page1_f09078_f06078_1000_vertical.png');
height: 100vh;
display: block;
}
#welcome {
text-align: center;
top: 50%; <-- This attribute won't work
}
#page2 {
background-size: cover;
display: block;
background-image: url('Page2_f06078_ffa860_1000_vertical.png');
height: 100vh;
}
#page3 {
background-size: cover;
display: block;
background-image: url('Page3_ffa860_f09078_1000_vertical.png');
height: 100vh;
}
This is my html:
<html lang="en">
<head>
<link href="SinglePage.css" rel="stylesheet">
</head>
<body>
<div id="page1">
<h2 id="welcome">Welcome!</h2>
</div> <!-- End of page1 -->
<div id="page2">
</div>
<div id="page3">
</div>
</body>
</html>
top, left, right and bottom css properties work only when used with relative, absolute or fixed position.
Use following css:
#page1 {
position: relative;
}
#welcome {
transform: translateY(-50%);
text-align: center;
position: absolute;
top: 50%;
right: 0;
left: 0;
}
The top, right, bottom, and left properties specify the position of positioned elements.
Go through this link: https://developer.mozilla.org/en/docs/Web/CSS/position
Add Position:relative;
#welcome {
position: relative;
text-align: center;
top: 50%;
}
I try currently to make a navbar with images, the navbar should be in middle centered with the image repeated on both sides. However the picture is only repeating on the right side. Anyone got a solution?
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
i also found this but it is (above) only for the background, do i have to seperate the navbar in 2 container?
JSFIDDLE
Thats what i got so far.
Any help is appreciated.
you need set ul to text-align:center;
find updated fiddle
.navbar2 ul{
text-align: center;
}
Thank you locateganesh it worked, for some reason i got now some placeholders between the buttons seen on your updated jsfiddle. How did this happen? i didnt changed anything only the text algin center.
edit:
i got it to delete the spaces between the images.
.yourclass {
font-size: 0;
}
In css3, you can use multiple images for background-images.
All the background-? rules can be used with the same construct.
<html>
<head>
<title>Image Demo</title>
<style>
body{
text-align: center;
}
#nav{
background-image: url("images/battery1.jpg"), url("images/battery2.jpg");
background-repeat: no-repeat, no-repeat;
background-position: left top, right top;
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="nav">some text</div>
</body>
</html>
Try it, but you'll need your own battery pics.
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 need to stretch the background image on the screen and fit when resizing it on this website DELETED, does anybody know?
<body>
<div id="background"></div>
...
</div>
</body>
The CSS file:
html, body { }
body { height:100%; width: 100%; }
#background{ position: fixed; min-height: 1024px; height:100%; min-width: 100%; width: auto; background-repeat: no-repeat; z-index:1 }
Thank you in advance
You'll find everything you need here:
http://css-tricks.com/perfect-full-page-background-image/