I am having troubles with HTML/CSS when combining a div with a fixed-background image together with a scrolling png with a transparent background.
What happens is that the div with the png picks up the background color of the page when it scrolls over the div with the fixed-background image. Here's an example where the body is red so it is clear what's going on.
Here is my markup:
<body bgcolor="red">
<div id="bkg"></div>
<div><img src="hands2.png"></div>
<div id="bkg2"></div>
and here is the css:
*{margin:0;padding:0;}
img{max-width: 100%;}
#bkg{background:url(danicool.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}
#bkg2{background:url(danifreak.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}
I tried adding background: transparent to every div that might effect things with no results.
Is it not possible to scroll over a fixed-background image with a png that has a transparent background?
Your problem is that the hands div is in flow, and taking space.
You want it to be out of flow, and so the 2 images are adjacent one to the other.
the easiest way to acieve this is settin position absolute (and then adjusting the position;
*{margin:0;padding:0;}
img{max-width: 100%;}
#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
.hands {
position: absolute;
top: 400px;
width: 900px;
}
<div class="body" bgcolor="red">
<div id="bkg"></div>
<div class="hands"><img src="http://www.moutonotopia.com/transparency/hands2.png"></div>
<div id="bkg2"></div>
</body>
img{max-width: 100%;}
#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
.hands {
background-color:rgba(255,0,0,0.5);
position: absolute;
top: 400px;
width: 100%;
}
<div id="bkg"></div>
<div class="hands"><img src="http://www.moutonotopia.com/transparency/hands2.png"></div>
<div id="bkg2"></div>
Hi llyfre you can set like this
<div class="bg-img"><img src="//www.moutonotopia.com/transparency/hands2.png"></div>
CSS
*{margin:0;padding:0;}
body{
background:url(//www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;
}
.bg-img{
background-color:rgba(255,0,0,0.5);
margin-top:100px;
}
img{max-width: 100%;}
#bkg{
background:url(//www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
#bkg2{
background:url(//www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}
<div class="bg-img"><img src="//www.moutonotopia.com/transparency/hands2.png"></div>
Related
I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.
I want to position a background image on the background of my page.
I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.
Yeah I know confusing. I didn't understand either when I read it. So I added a
Fiddle here
I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
Hope now it makes sense.
You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:
background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.
Have a look at the below snippet:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
Hope this helps!
You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
background-size: cover;
}
I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/
I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?
Thats what I did for you so you can see, check it out!
Check out the fiddle
I'm setting up a banner for a website. The banner is consisting of an image, and some text on top of it, here's the code :
<div class="banner_div">
<style>
.banner_div{
background-image: url(/images/banner.jpg);
width: 100%;
height: 100%;
background-size: contain;
}
</style>
<p class="banner_text">Line 1</br>Line 2</p>
</div>
What I need is for the image to cover the full width of the screen (even if the screen is wider than the image, in which case the image should strech) and the height of the div to scale accordingly so the image is fully displayed. How can I achieve this ? I tried every property of background-size but it didn't work...
Edit : the current problem is that the height scales tho the one of the text
I have a better solution for your issue.
The problem is because you are not giving height for HTML,BODY.
if you gave the height this issue will be solved, no need to add position elements to this, it will make some alignment issue in future
SOLUTION
HTML
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
CSS
html,body{
height:100%;
margin:0;
padding:0;
}
.banner_div{
background-image: url(http://placehold.it/100x100);
background-size: cover;
background-position: center;
width:100%;
height:100%;
}
.banner_text{
margin:0;
padding:20px;
}
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
Try the following solution:
body, html {
margin:0;
padding:0;
}
.banner_div {
background-image: url(http://placehold.it/100x100);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-position: center;
}
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
Firstly use a 16:9 image for better results:
Then use img tag itself,
Scaling the image without its aspect ratio into consideration may not look good for a banner, So we use width:100% and height:auto to preserve banner ratio.
Most screen uses 16:9 ratio, so it should be good if you have a 16:9 image
body,
html {
margin: 0px;
padding: 0px;
height: 100%;
}
.banner{
display:block;
}
.banner img {
width: 100%;
height: auto;
position: relative;
}
.banner p {
float:left;
position:absolute;
top:0px;
}
<div class="banner">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg" />
<p>Some text here</p>
</div>
Some random text to show other elements wont overlap the banner
This css code working with me :
background-size: 100% 100%;
I've been working on page for my client and I want to have background image on body (in fiddle there is black color instead of image) and content wrapper with width of 1200px (or so) and height of 100% of the page with white color background.
The problem is, that even though I have all parental elements set to have height 100%, the background is not 100% height. It's acting weird and I've tried to rewrite for 4th time without success. I don't know what is wrong. Could you please give me a hint, tip or solution. Thanks!
html, body {
background: url('./images/background.jpg') no-repeat center center fixed;
font-family: Verdana;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
height: 100%;
min-width: 1200px;
background-color: white;
background-size: cover;
}
.leftcol {
width: 350px;
height: 100%;
float: left;
}
.rightcol {
width: 850px;
height: 100%;
float: right;
}
.footer {
width: 1200px;
height: 50px;
float: left;
text-align: center;
}
Also I have noticed that footer is acting wierd to, it's in the middle of the page in 'rightcol' element.
Here is a fiddle: http://jsfiddle.net/cramb5fg/1/
See if this JSFiddle gets you closer. It has a full screen background too.
It fixes a few errors like:
Clearing your floated column divs by adding a "Clearfix" to the container that now holds only the 2 column divs.
A wrapper that displays at 100% height and width was added to contain the header, main content, and footer. It also has the main background applied.
The float was removed from the footer, and now the footer is absolutely positioned at the bottom, in relation to the main wrapper.
The empty <div class="header"></div> was removed.
HTML Structure in the JSFiddle Example (based on your wireframe)
<div id="main-wrapper">
<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>
<div class="container clearfix">
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>
<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->
<div class="footer">Copyright © 2014</div>
</div> <!-- end main-wrapper -->
Give this wireframe a good test because some details may have been overlooked, also test by enlarging and reducing the browser area, and holding down CTRL+ or - to to enlarge and shrink the screen.
I'm not sure exactly what you are trying to do but your example code is different than your fiddle. You should be able to make your background 100% easily.
html {
background: url(http://placehold.it/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See fiddle here
Also, check out http://css-tricks.com/perfect-full-page-background-image/ for more info
edit: I've updated your fiddle with what I think you are trying to do
CSS heigh will if you define position absolute/fixed. such:
.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}
One more important matter: top and left also compulsory.
I am trying to create a simple parallax effect using css, I have the following code which created the effect I am looking for, however it seems to zoom the image in, so half of my image is cut off at the corners. How can I amend what I have so that it keeps the actual size of my image?
<div id="slide4" class="slide" data-stellar-background-ratio="0" data-slide="4"> </div>
<div id="slide2" class="slide" data-stellar-background-ratio="0.5" data-slide="2"> </div>
#slide4 {background-image: url("http://2.bp.blogspot.com/-m95Wunj4M-g/T8zFSAFdh4I/AAAAAAAAEhg/y9W8e-Iu4WQ/s1600/Flower-wallpaper-32.jpg");
background-size: contain;
float: left;
margin-top:20px;
height: 450px;}
.slide {background-attachment: fixed;
height: 100%;
position: inherit;
width: 100%;}
try
background-size: cover;
as you can see in this fork of your fiddle