so, a normal way to get the background in html is this:
<style>
body {
background-image: url('https://media.giphy.com/media/itTRilS6MUfqMCQbgZ/giphy.gif');
}
</style>
but now let's suppose i need the background to be BIGGER, so much big that GIPHY just won't allow, you can't use width='' and height='', so now is there a way i can just do i straight from the html?
You have background-size and background-position in CSS to play with.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Related
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;
}
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.
Is it possible to somehow overwrite an image with a new image with background-image?
I wan't to be able to change an image depending if it's retina or not with css.
Example
HTML:
<img id="foo" src="foo.png">
CSS:
#foo { background: url("bar.png") }
Seems a bit of a convoluted strategy to me. Let me suggest a better option for dealing with retina-quality images. The simplest strategy I've seen for this (and I feel the best, at this stage) is to make the image twice the width and height you need it in Photoshop, then save it at a fairly low quality to keep file size down. In your HTML, or in your CSS, or both, set the desired width and height of the image. It will look great on both regular and retina screens that way, and still have a very small file size. And you only need one image, too, which is great.
Try css3 :before :
img{
display:none;
}
img:before{
content: "";
width: 20px;
height: 20px;
background: url("bar.png");
}
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;)
}
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).