I have an image that I like. I would like to use this SMALL image to fill my page but the image has a gradient effect so I cannot use repeat. Is there any way I can make it so the image is stretched to fill the page with CSS?
No, you cannot set the size of a background image. You'd either have to use repeat or strech the image itself with a a graphics editing program.
You could also use an workaround with an IMG tag and CSS: Stretch and scale CSS background
I realize this is a rather old question, but seeing as I stumbled upon it, I might as well put an answer here.
It is possible to change the size of a background-image by using the background-size CSS property, like so:
.class {
background-image: url(....);
background-size: 100% 100%;
}
Take a look here for more: CSS3 background-size property.
Related
I want to blur the background of a dive or any html containers without its inside elements.
Well I tried googling for it and found that it can be through html2canvas (creating image from beneath objects and then blur it) and also using -webkit-backdrop-filter has no effect yet.
What I want is a live blurred container similar to windows 10 menus background in the screenshot bellow.
I would blur the original background using Photoshop or something, and then put it as a background image and play with the position. like this:
container {
background-image: url("blurredbg.png");
background-repeat: no-repeat;
background-position: 30px 0px;
}
please refer to this page for more information about background positioning.
You can, of course, control the positioning dynamically with container.style.backgroundPosition="100% 0"; in javascript
I guess you can use the following stackoverflow answer to
check if div have elements
.
if elements are not present then you can use
document.getElementById("yourId").blur(); to blur your div you can refer learn more about blur
I'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.
i have a div that is 90x110 how do i restrict the background image i need to use to this size? background image is 120x100?
While the background image will be cropped to the size of your div automatically, in case there's any other content that doesn't stay in, you can always set overflow to hidden in your CSS:
overflow:hidden;
You can also resize your background images, if there's a need. Please have a look at this and this to see how it can be achieved (there are multiple ways).
Oh, you may also want to have a look at a similar SO question posted a few hours ago.
The div will not grow larger, the only portion of the background image that will be visible will be a 90x110 rectangle.