I'm having this very annoying problem that I've tried to figure out for the past few days. I've even read every possible solution on Stackoverflow, but nothing works!
I have this code in my HTML:
<div id="picture">
<div class="picture-1"></div>
<div class="picture-2"></div>
<div class="picture-3"></div>
</div>
And this code in my CSS:
#picture {
height: 250px;
border-top: 1px solid #ffefaf;
border-bottom: 2px solid #ffffff;
clear: both;
}
.picture-1 {
background: transparent url('images/view.png') left top no-repeat;
}
.picture-2 {
background: transparent url('images/plant.png') left top no-repeat;
}
.picture-3 {
background: transparent url('images/view.png') left top no-repeat;
}
The pictures are in right folder, the names are right, and yet they won't work. What could be the problem?
Your picture DIVs have no dimensions. They do not automatically set their size to the image, like an IMG tag does. You need to set this in the CSS using width: and height:.
I think the problem is that your inner divs don't have a size so they try to add the following lines to your css:
#picture > div {
width: 200px;
height: 200px;
}
Add #picture div{height: 250px;}
Js fiddle for your answer-> http://jsfiddle.net/niteshp27/xkLd7/
Related
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
I have a div and a background-cover attached to its div. It doesn't work with Chrome : it, for some images, adds a blank line (horizontal, or vertical, it depends).
HTML
<div class="div_image"></div>
CSS
.div_image {
width: 100px;
height: 100px;
border: solid red;
background: url('http://2.bp.blogspot.com/-v7UK1A8fw3A/UJXR5Vc5RjI/AAAAAAAAHuY/aWzZuSv8-jI/s250/Laika.jpg') no-repeat center center;
background-size:cover;
}
See http://jsfiddle.net/rTBVs/2/.
hi i have tested this and it works,
.div_image {
width: 100px;
height: 100px;
border: solid red;
background: url('http://2.bp.blogspot.com/-v7UK1A8fw3A/UJXR5Vc5RjI/AAAAAAAAHuY/aWzZuSv8-jI/s250/Laika.jpg');
background-size:cover;
}
i have removed (no-repeat center center) from the background value
cheers
There is no blank line for me in Chrome ... but it sounds like a problem with the image to me. The URL you have on the div doesn't belong there, though. That's not where a url belongs, and it may be causing a problem in your browser.
Basically I can't get the div that holds all the content to move down with the content itself. If I take out the fixed height on the comborder div it disappears. The content remains in place, though over the bg image. Does anyone see any solution to this? I've tried a whole lot and can't come up with anything. I just want to base the height of the content div on the height of the content, like a div usually works. Thanks a bunch!
Here's the site: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1
Here's the relevant CSS:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}
div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}
Here's the relevant HTML:
<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
<div class="comcon abs" style="opacity:none;">
<div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">
<?php
if($_GET['page'] == "profile") {
include_once('profile.php');
}
if($_GET['page'] == "editprofile") {
include_once('editprofile.php');
}
?>
</div>
</div>
</div>
Do this:
body.combody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
background-origin: padding-box;
background-position: left center;
background-repeat: repeat;
background-size: 110% auto;
height: 100%;
}
div.comborder {
background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
border-radius: 30px 30px 30px 30px;
height: 100%;
width: 900px;
z-index: 10;
}
What is important to notice is that both the body and the div have a 100% height.
That might help you.
Absolute positioning removes the content div (and everything else) from the flow of the page. That makes it so the containers don't know the size of the inner elements.
Remove all the .abs classes from everything inside the container, and the white background will correctly stretch as you want. However, it also stretches over the black border, so you'd have to find different way to create it.
More general advice:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
These are just plain bad ideas. It looks like you saw or were told about always putting CSS into a CSS file and never in HTML; a good idea when done right, but classes should identify content, not styles. For example:
.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }
It creates duplicate position: tags and so on, but it's also much easier to understand and much easier to get the results you want, since fixing your current problem involves editing the HTML when it should be a CSS problem.
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>