Background-Image Not Rendering - html

I have a background-image that is getting loaded into the browser but it's not rendering on the page. Here's the code:
HTML
<body>
<div id="mainContainer">
</div>
</body>
CSS
#mainContainer
{
background-image:url('bckgrdImg.png');
}
That's it. I just need the image to render. Again, when I inspect the page in Chrome I see the image being loaded into the browser but it's not on the webpage. Any thoughts? Thanks.

Hi now define at least min-height of your div because your div id width is by default 100% and height is 0 than define at least min-height of your div
as like this
#mainContainer
{
background-image:url('bckgrdImg.png');
min-height:200px; // height define according your design or background images
}

Try giving your div some width and height. It's because if you look at it, the div has height 0.

A link would be VERY helpful.
But try setting width and height on #mainContainer first.
Like:
#mainContainer
{
width: 100%;
height: 100%;
background-image:url('bckgrdImg.png');
}

remove the single quote
#mainContainer
{
background-image:url(bckgrdImg.png);
}
You may need to defined the dimension for this div. When nothing in the div, without the width and height css, the div will display as invisible becoz it is 0px x 0px :)
#mainContainer
{
background-image:url(bckgrdImg.png);
height:100%;
width:100%
}

Related

How to prevent Chrome from taking up 100% of window height?

I don't have this problem in Firefox or Opera Presto but in Chrome on a page that doesn't have the height specified the body takes up 100% of the window height at all times. So basically this means that if the body content fits in less of the window height there will be space remaining there.
Is there a way to inhibit this behavior and make it collapse relative to the amount of content in the body like it does in the other browsers?
The css body rules are:
body {
width :840px;
margin :7px auto;
background:#f8f8f8;
border :1px solid #888;
}
You can set the body to float to achieve this effect.
body {
float:left;
}
Edit: I see you're using the body as a container element. Maybe it's better if you put all your stuff into a container div and don't style the body at all?
I've noticed that on some pages, like that 404 one, Chrome applies display:flex; to the body by default. You can give this a try:
body{
display:block;
}

How to force a parent element to keep size of its content on resize

I hope this one is solvable with CSS only. I have an element like this:
HTML
<a href="" title="">
<img src="" alt=""/>
</a>
The height of the <a> element is set using percentage relative to the body's height. The image inside should always have 100% of the height of the <a> element. This works fine with a CSS like:
CSS
a {
display: inline-block;
height: 20%;
margin: 0 5% 0 0;
text-align: center;
}
a > img {
height: 100%;
}
The problem I'm facing now is the following: When resizing the window, the image gets scaled correctly, as the <a>-element gets a correct new height. Unfortunately the <a>-element keeps its initial width. This means, that the margin gets useless and the elements start overlapping or drifting apart.
The effect
You can see the effect in this image:
Demo
You can try it yourself
Question
Is there any way I can solve this in a way that the parent element has always the width of its content? When I reload the page with the new height after resizing, obviously everything fits again.
Use div tag.
Create a separate division of your content.
Then you can customize all the things as much as you can.
I solved it for the moment like this:
CSS
a {
margin: 0 1% 0 0;
background: red;
text-align: center;
}
a > img {
position: relative;
height: 20%;
}
Demo
Try it yourself
You can do it with jquery
http://jsfiddle.net/Rjk8U/4/
$(window).on('resize', function() {
$('a').css('width', $('img').width());
});
I am just setting the width of the anchor to the same as the width of the image. I could not figure out how to do it with only CSS
Note: I understand that you want the page to be 100% height but the blocks you have I assume is within the page, so why can't they be based on width percent instead? If you base it on height then when you only change the width of the page, the image does not resize

Responsive web design and resizing images

Repsonsive web design works great on most html elements excepts images.I find it a mess. When resizing viewports, you cannot use resizing percentages on an image since it will take on the parent element width and height right. You need to set fixed widths and heights for images...Or am I missing something?
So how exactly do you do a responsive design involving images whose container element/parent will stretch above its native width and shrink below its native width?
Thank you
The done thing in responsive design is to set this in your css for images and some other elements:
img, embed, object, video {
max-width:100%;
height:auto;
}
Then in your html the image simply takes up the size of it's container.
You do not set the image size itself you just let it grow/shrink itself.
well - you can write: .selector img{width: 100%; height: auto;} and then use the size of the div it is in to determine it's scale. or you can also set the image as a background and use similar methods and maybe even mess around with background-size: cover. i'll make a jsfiddle...
.image-w img {
display: block;
width: 100%;
height: auto;
}
What I have done on my site is this:
page stuff....
div class=picr>
img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >
<p>Caption about mountain pine</p>
/div>
Then in CSS
pic, pic6 {
float: left;
}
...
.pic, .picr {
width: 37%;
}
#content img {
width: 100% ;
}
So the div class is styled, and the picture is set to fill it. By using the div, then I can also style within the .pic classes to be distinctive from the body text.

Responsive image max height 100% doesnt work in firefox

i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)

Image attribute height/width auto causes performance rendering?

Now I face a problem with defining image attribute height and width as I don't know its dimension from the server. Then I think about assigning width/height to auto.
e.g.
img {
height: auto;
width: auto;
}
but I am concerning about rendering performance images without specific width/height. I would like front end developers here to help with this concern.
Hey now define your img width in 100%
as like this
<div class="imgtagcss">
<img src="xxx.jpg" >
</div>
Css
.imgtagcss{
width:xxx;
}
.imgtagcss img{
width:100%;
}
Give width and height has a 100% in css. So when css is loaded all the image tag will be setted to 100%. This doesn't give any performance effect.