<style>
#text{
background-image:url('/../image.jpg');
<<image-resolution:???>>
}
</style>
I have a CSS where I use an image as the background. [width = 5000p, height = 3000px, horizontal and vertical resolution = 72dpi]
The image appears with a very big size and the pic does not cover the screen completely. Is there a way I can change the size/resolution of the image using image-resolution or any other method?
You should be able to use the background-size CSS property to change the size of your image.
#text{
background-image:url('/../image.jpg');
background-size: 100px 100px;
}
First of all image-resolution tag belongs to css3 and all the browsers might not support this but if you want to do this then try to provide image resolution like this :
<style>
image-resolution: 72dpi;
</style>
All the best....
Tiffon gave you the correct answer. But in the "real world" you'll never use such a big image for a repeated background.
Typical sizes are, for example:
200px X 200px (repeat)
10px X 1000px (repeat-x)
2000px X 10px (repeat-y)
Of course, you have also to consider the weight of the images: 40/50Kb could be an approsimative max size.
In conclusion, instead of use the css rule, I suggest to you to resize and compress (JPG compression, from 50% to 80%) the image. You can do that with software like Paint or FastStone Resizer, a very useful freeware.
Related
I'm trying to add a background to an element, however the image is very large. As a result, using background: cover leaves the image actual-size and does not center it. Thus, the image appears very "zoomed in" as it is not showing as much as it can.
So, here's the question: How can I have the image be as small as it can, while still covering the entire element. Furthermore, how can I center it properly?
Attached I have what background: cover gives me, and a simple photoshop mockup of what I want. I outlined in red where the border of the background is.
Background: Cover with small width
Photoshop mockup with small width
Background: Cover with large width
Photoshop mockup with large width
Currently your background-position declaration for #home is set to 0, 0;
Those numbers represent the x-axis (horizontal placement) and y-axis (vertical placement) for the background image. I played around with the inspector and was able to move the background image's position more to my liking. You could also try playing around with keywords if they make more sense to you
background-position: top left;
or perhaps:
background-position: center center;
Percentages are also an option:
background-position: 25% 50%;
The keywords and percentages also apply to the x-axis and y-axis respectively.
Check out the MDN article for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
One final note, your background image is huge–7.1MB to be exact. If you could get it the size down to at least 1MB (though under 500kb would be ideal), I'd totally recommend that.
I am not sure if this could help since I have not tried it; however, basically there is a property called
background-size: and the size can be in %
so if you want the background image to be 50% ( width and height ) or 50% 75% ( width and height) of the or certain size you want
see documentation background-size also see examples
Hope this could help
Alan Mehio
London
If I want to design a background for a website using photoshop, what image size should I make ? I want to make a gradient background for my web-app but I don't the specifications to follow.
Take a look at w3schools - css - background. You need to use background-repeat, otherwise you will be forcing the users to download a huge image. So make your gradient of any size, then crop a piece off that is the same height, but a small width (< 10 pixels). Use this as your background with the css background-repeat: repeat-x;.
Use Patterns or Gradients for a good look on all screen resolutions and then, in CSS use
background-repeat:repeat;
You should set the background's width to 5px and the height very long, and set your css to background-reapeat: repeat-x; background: url(your image url here) fixed This is if you have a vertical gradient, if you have a horizontal gradient, it is just vice-versa.
So I am trying to use a background image in the bottom left of my page but I want it fixed and to resize with the browser window.
The only way I get close at all to reaching this goal is using 'background-size: 100%' However, that then makes the image TOO tall. So I'm not sure what to use to actually make it fit.
Any suggestions?
This is my current code...
body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
background-size: 100%;
}
Well, background-size takes more than just one value. You could try something like this:
background-size: auto 100%;
However, for simplicity, first try:
background-size: cover;
This would make the width of the background automatically adjust to the aspect ratio of the 100% height. This guarantees that the background image will never be smaller or larger than the height, but the width is variable to the aspect ratio of their browser.
ADDENDUM
Also note that background-size is not supported in all browsers. If support for Internet Explorer is an issue for you, then I'd strongly suggest a Javascript fall-back. I'd also highly suggest reading the always lovely Chris Coyier's article on the "Perfect Full Page Background Image". It discusses fallbacks of all kinds!
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).
I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but **the image doesn't increase in size; it simply repeats*.*
How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).
There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:
background-position: center center;
background-repeat: no-repeat;
Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos>
where xpos and ypos can be given in the regular fashion (em, px, %, etc...).
The only way I've ever found is:
Set background of #header to bgcolor of header image.
Place new div inside #header
Split header image into 2
Set left half of new image as #header background aligned-left
Set right half of new image as #header.div background aligned-right
Of course that's only going to work with appropriate images though.
I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).
Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?
#Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.