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;
Related
I have an SVG image that I am trying to use in my page that I would like to stretch with page. The same CSS that works with non-SVG images doesn't work for the SVG. As seen in the quick fiddle here -> http://jsfiddle.net/TUby3/
My HTML
<img src="image.svg" id="topHeader">
My CSS
#topHeader {
width: calc(85% + 10px);
height: 46px;
}
I've been trying different things in my CSS but can't seem to get anything to work. When I make the page smaller, the width of the image does get smaller but the height does not stay fixed, the height shrinks in uniform with the width.
Does anyone know a solution to this that does not involve trading the SVG for a PNG or JPEG?
Try this:
http://jsfiddle.net/TUby3/1/
Just put a div with a set height around it.
html
<div id="test">
Your Image
</div>
css
#test{
height:"60px;
}
You could probably achieve the same effect you are after by setting it as a background image to a div and using the background-size css...
background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;
(That said, Mark's solution works fine for me in Chrome)
I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.
I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.
I just finished building part of my website using Twitter's BootStrap, but am looking on ways to improve it. This module has an image of known width but unknown height (image height will vary but has fixed width) and has text on top of the image. I originally built this by having an image tag inside a div, then using position:absolute; top:0; to move a layer a text above it.
I don't like the idea of using position:absolute;. My alternative solution is to treat the image as a background of a div that contains the text. However, by doing so, I have encountered two problems:
I don't know how to specify the height of the div as this is a
variable based on the height of the image. The width will always be
of span4 (300px). Each image will only have a few words at most
therefore not enough to take up the entire vertical space of the
div.
As the browser width shrinks, part of the background div gets
cropped off. This is because BootStrap is trying adjust for
responsiveness. How would I fix this?
I am completely stumped, and I feel that this alternative solution is not possible without being able to define a definite height. Is there a better alternative?
My code:
<div class="span4 cell">
This is a placeholder image
</div>
.cell { background: url(http://www.placehold.it/300x200) no-repeat; }
Just to be clear, here is an image of what I am trying to create:
Demo................................
HI now used to this
.span4.cell {
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
}
Live demo
Try this css code. It set height as auto.
remove if you don't want border.
.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}
Try this demo: jsfiddle
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 */
}