I was trying to set an image as background image for my django application. But when i set it, it is getting displayed as tiled image. ie without actually stretching the image, same image is tiled and shown 4 times. Can somebody tell me how to stretch the image and set it as a background image. I will paste my code here. I am sure some attribute must be there setting this, which i couldnt find on googling.
<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >
Instead of using a background image on the body tag you should add a image tag right below body, set the position to absolute and a low z-index and then have width=100% and height=100%.
You need to apply this as a style, not as an attribute. That will work if your browser supports CSS 3:
style="background: url(/static/paper.jpg); background-size: 100%;"
Some background info:
http://css-tricks.com/perfect-full-page-background-image/
http://css-tricks.com/how-to-resizeable-background-image/
In short: no, you can't stretch the background image with html/css1/css2, you're only options is to either use css3 ( witch is not fully suported by all browsers ) or to use background-attachment and background-repeat css porperties to achieve an alternative result …
Another option would be to use an img tag as a background using z-index css proprety however you'll find it dificult to get it working proprely in all major browsers .
You can stretch your background to 100% width and height by putting your image in an <img> tag and give it a z-index of -1 so it acts like a background and is behind everything else. This works in all browsers.
<img src="..." />
img{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
If you do not want to break the aspect ratio, just set either width or height and not both.
Check working example at http://jsfiddle.net/UXBRM/1/
Edit your image with paint. Click image and save your image according to your need.
This will work in any html , surely.
As others mention, you should always try to define as much of the attributes in your css and not directly where you have the path to the image itself. This is how it was done way back and is deprecated and probably why it is not working.
use the img src="poefwpf.png" and maybe a to easy edit in your css:
#imgex img {
width: 100%;
height: 100%;
(maybe also z-index:-1;)
}
Related
In my project all images inside a container have the css attributes max-width: 100%; and height: auto; to scale images down when the viewport shrinks and the container shrinks.
This is working, but the price to pay is that the browser is not able to draw the page correctrly without loading the images to get the dimensions.
When I embed the image via <img width=100 height=100 /> the browser normaly reserves the space and renders the rest of the page.
As soon as the above mentioned css is applied, the site content below the image “jumps” because the image is 0x0px during load progress.
This leads me to two questions:
Is there a way to use the max-with 100/height auto technique without destroying the normal placeholder behavior?
If not, what would be a correct class declaration to apply for some of the images that should not auto-resize and loaded normally, with correct sized placeholder during load? I tried height: initial and height: inherit, in both attempts the image is still 0x0px before loaded, the html height attribute is ignored.
I created a fiddle, but the loading problem cannot be seen here due to caching; Therefore, I copied the code from https://jsfiddle.net/yrx52avq/4/ to http://www.testserver01.de/fiddle.php and added delays and no-caching options.
Reload the page: The red boxes pop out during load progress. The green ones do not.
In your css, please try the below code using the property object-fit:cover or object-fit:contain. This property will resize your image to fit in the container.
.container img {
object-fit:cover;
max-width:100%;
}
or
.container img {
object-fit: contain;
max-width:100%;
}
you can find more information on object-fit property from the w3schools
I have an JPG image with size 1024 x 724. My page size is not fixed. My requirement is: If I resize the page then the background image should also resize and fit to the page.
You should do this with backgroud-size in css
If you'd like to use CSS3, you can do it pretty simply using background-size, like so:
background-size: 100%;
in you div you can add the style directly without using a css external file
<div style ="background-size: 100%;" ....> .... </div>
You need to make a 100% width b aground which must cover up you complete background.
So please add this css in you style.css file.
html {
background: url(yourimage.jpg);
background-size:cover;
}
I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:
Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?
Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks
With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.
So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.
Regarding image cropping: There is some trickery you can use as outlined in this SO answer.
JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)
JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)
Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website.
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-position:20% 20%;
background-size:600px 800px;">
</div>
Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-size:100% 100%;">
</div>
Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.
well you can set the image as a background of a div and then set the background-size property
#yourDiv{
width:100 px;
height:100 px;
background:url('path/to/your/image');
background-size: 100px 100px;
}
you could set different properties for :hover but you'd need to use javascript to change the properties onclick
You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.
HTML
<img src="img.png" class="resize">
CSS
.resize {
width:100px;
height:100px;
}
.resize:hover {
height:900px;
width:900px;
}
Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.
I'm getting a problem in html and css,
I used a bg image for my popup window whose size is 500px width and 400px height;
having a scrollable text in it. but problem is that if i reduce a size of browser it get distorted. Please help me if i can make it scalable background and according to that text as per browser size.
Thanks
Mayur Mate
You cannot scale a background if you defined it as part of your CSS without using some JS. In the example below, the black part of the background would scale/resize with the browser window but the image would not; the img would just happily sit # top:0, left:0, render 1:1 and laugh at you.
/* Black will scale, images does not */
#someDiv {
display:block;
width:100%;
height:100%;
background:#000 url(someImage.jpg) 0 0 no-repeat;
}
If you need to have your background image in your CSS for whatever reason, then read this http://css-tricks.com/perfect-full-page-background-image/ for how to manage scaling CSS backgrounds w/ JS
or
If you defined your background as an img then you have a better chance and you don't even need to use JS (although you probably should if you want to maintain ratio/scale).