CSS HTML figure padding - html

I am trying to use CSS and HTML to insert an image into a webpage.
I have the following on CSS:
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}
and in my HTML, I have:
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP"></div>
Although this works, I have a big white space on the top and bottom of the images, which I do not want. I tried adjusting the padding values, but that does not seem to really help.
Could anyone please point me in the right direction to get rid of these white spaces?

I would remove the padding top. That should eliminate the problem. I'm not sure why you would need such a high amount of padding between them.
EDIT - Just read that you say the padding hasn't helped you. Any chance of a link to the url? Or a live example somewhere to see the issue in more detail?

Make sure that the line-height of the figure or surrounding element is set to line-height:1;

The only size that you have specified is the padding. The size of a background image doesn't affect the size of the element. You should remove the padding, and specify width and height for the element so that it's the same size as the image.

Unfortenately there is no way to do that in HTML/CSS. Only way of doing this is inserting the values on your server or client-side by javascript. You should really do it with <img> tags inside your <div> element like so.
Make sure you point to the right location of the image you want to show relevent to folder where it is being called.
http://jsfiddle.net/gKFAT/

Here you try to show an image as a background for a div. Is there really strong reason not to use html like above?
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP">
<img src="eDTP.png">
</div>
If so, you need to specify the dimentions of your di, 'cause it doesn't auto fit the background size (no surprise here, I think).
Try
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}

Your biggest problem is width and height. Also, how do you want this image displayed? Do you want it below the text, on the side of the text, etc? In modern browsers, a div is fully collapsed, and its height is equal to 0. Its width, by default, is 100%. IE7 and older does not work this way for the height.
You need to specify, not padding, but width and height for your div container, eDTP, that is, if you wish to have the background image added via CSS. If you wish to have an image populate eDTP using the img tag, then you do not have to specify the height.
By the way, the reason you see your image with the padding is based on something called the box model. Padding extends the visible region of background color, a background image, and others. The padding you have is functioning like you have a height assigned to its container. But as I said before, this is a very bad way to do this. Add this to your eDTP declaration:
#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}

Related

After setting up a background-image in CSS, content is being cut to empty space if the window is resized

I'm having a problem with my layout when I set a background-image with CSS. I've looked through Google and SO but couldn't find someone with exactly the same problem, and none of the solutions applied.
What I'm trying to do is create a page with a background image that fills the entire height of the screen.
Consider this simple html page:
<html>
<body>
<section class="main-section">
<div class="my-div"></div>
</section>
</body>
</html>
In CSS I have two selectors:
.main-section {
background-image: url("../images/image-hero.jpg");
height:100vh;
}
.my-div {
width:500px;
height:500px;
border-style:solid;
border-color:white;
}
And it works fine, except when I resize the window. If the browser is resized to a value that is less than the div's width and height, scrollbars appear and the content is cut. Here's a 300kb gif that illustrates the behavior.
https://i.imgur.com/fS46akt.gif
I tried changing the height to % instead of vh, auto, tried messing with the minimum-height property using every possible value, tried using the background-size property, and setting different values to all these properties.
What I want to achieve is the following: the background image fills the entire height of the screen while keeping its original aspect ratio, it's ok if it overflows horizontally. When the windows is resized, the background image should resize accordingly (or not, it doesn't really matter) and if it becomes smaller than its contents, they should still be visible after scrolling, instead of cutting and showing white/empty space.
I think I'm missing something really obvious or I'm not using the background-image property as it's intended. Please help.
Add background-size: cover; to .main-section

Why does padding affect whether or not a background image shows up?

I'm trying to build a simple responsive design. At this point, I'm just battling with the header. I'd like to have a background image in the header, and as the screen size gets bigger, a different image to appear in its place. Right now I just want to get the iPhone 5/SE screen size to work. The HTML has a simple div:
<div class="header"></div>
And I am including the viewport meta tag everyone's talking about:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS has the following:
* {
margin: 0;
padding: 0;
}
#media screen and (max-width: 320px) {
.header {
padding: 5em;
background: url(images/header-320.png) no-repeat top left;
background-size: contain;
}
}
When I remove the padding setting, the image disappears. If I set the padding to anything less than 5em, it adds a space between the right side of the image and the right side of the screen.
Can anyone explain this behavior, and why (it seems that) the padding
setting is necessary for the image to even appear?
If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
Maybe there's a clever workaround solution that I should use instead?
P.S.: this is for an eBay template, so I need to be able to do this without any JavaScript (they don't allow it).
Without padding/height
Take the below example:
console.log(`Header height: ${header.clientHeight}px`);
#header {
background-color: red;
}
<div id="header"></div>
I have set the #header element to have a background-color: red, but you can't see any red colour, right? Because the element's height is 0px by default, so the element is essentially not visible.
With padding/height
Now see this example with padding:
console.log(`Header height: ${header.clientHeight}px`);
#header {
background-color: red;
padding: 5em;
}
<div id="header"></div>
Notice the height is now 160px, and you can see a big pile of red.
To answer your question
Can anyone explain this behavior, and why (it seems that) the padding setting is necessary for the image to even appear?
Padding is not necessary. But the height of an element is.
To give height to an element, you can either:
Set height
Set padding-top and/or padding-bottom
Give HTML content (with height) to the element (i.e. texts, imgs)
If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
No. Read above.
Maybe there's a clever work-around solution that I should use instead?
No. Read above.
PS
By default, elements with default display: block will have a default width: 100%, but no default height value. That is why you can see the border span 100% in width but 0px in height.
Can anyone explain this behavior, and why (it seems that) the padding setting is necessary for the image to even appear?
As mentioned in the comments by #fcalderan, your div by default has no content and no styles, so it will have zero height. When adding padding (or explicitly giving it a height), the container will have a positive height and will display your image.
If it is absolutely necessary for some reason, do I always have to set it to some arbitrary value like 5em (which I found through experimentation as opposed to any kind of logic)?
It's not arbitrary -- it depends on the dimensions of your image and the CSS styles that you choose. In your example, you've setting a background-size: contain, which "Scales the image as large as possible without cropping or stretching the image."
This ultimately means that if your container is proportionally wider than the background image, it won't stretch to fit the container, so you have to choose units that are proportional to the size of the image. In this case, your image seems to be 320px wide, so setting 5em equates to 80px (5 * 16px), which is 320 / 4 -- thus proportional to the image, so you won't see any whitespace.
If you do want the image to stretch to its container, try background-size: 100%, which should stretch the image to its container regardless of the proportions.
Maybe there's a clever work-around solution that I should use instead?
No workaround needed -- it's just a matter of choosing the correct CSS styles to get the desired effect.
Further reading:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Apply width and height styling to div background image

I am using a background image for my top "heading" div section of my website. It was drawn on CorelDrawX6 and exported to a .jpg image, meaning I can't set the height and width exactly right when exporting. What I want to achieve is have the webpage scale the background image to the right height. I want to have height:150px; width:100%, but because it is applied to the div like this:
<div style = "height:150px;background-image:url('Design.jpg');">
I can't apply styling directly to the image. Does anyone have a solution?
P.S. I have checked out many of the "related questions" and have not found an answer. Also, please bear in mind I want a background image for one div, not the whole page (which would be a lot easier).
Current situation:
My desired situation is to have the full image as a background (the current image is a scaled-up version, the real image (which I could not upload) looks the same but has text on, and the light blue bar is much smaller).
try
HTML
<div class="lorem" alt="lipsum" title="lorem lipsum">
<img class=ImgLorem></img>
</div>
CSS
.lorem{
}
.ImgLorem{
}
.lorem img{
background: url(Design.jpg);
height:150px;
width:100%;
}
this should work.
Let me know.
This is what you looking for?
background-size: auto 150px;

frame using a Background-image

I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>

What is wrong with this CSS?

I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.