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.
Related
i've been trying to find the name of this but i have no clue on how is this called and made.I have been coding a html website and i wanted to do some experimenting with the background that there is Content on a white background(the white background is small just to cover the content not a main background) and behind it, is the background image. Check steam profile backgrounds everything is on the blue/black background and the games bgs are behind.
Sorry for my bad english.
I think to have understood your questione, in css make the body, or a background DIV height and width :100% than set the background-image: imagepath;
Now your should have the background.
than create a div, in CSS make it position: relative; height and width the size do your preferenze than to have it centered use matgin:auto; and to have only the background of the div look semi trasparente use a background-color:rgba(255,255,255,0.8)
I hope to have answered your question.
PS if your need to get started try Code accademy.
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
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?
Thanks for your help in advance.
Here is PNG of the layout: Website Layout
The Second Section (with the dark grey background) is giving me problems. Below is the CSS I am using for the background.
#mainbg {
width:100%;
height:450px;
padding-top:25px;
background-image:url(../images/mainbg.png);
background-color:#303030;
background-position:top;
background-repeat:repeat-x;
}
The background displays, (although it won't display unless I set a min-height, which doesn't work for IE6 anyway), and everything works, until I get content that stretches beyond say 450px.
After that, the content just spills over into the footer, and the background doesn't stretch. I don't want the IMAGE to stretch, just for the image to end and the background colour to continue on as a plain background fitting to the content.
How do I set the background height for this div so that it stretches to accommodate the content, whilst only displaying the background image once on the y axis (while still repeating on the x axis).
I play around with other height and inherits and autos, but setting any of those just means the image does not display.
Help, this is driving me insane!
You have two problems:
It is forcing you to set a minimum height because you don't have content in it yet. Imagine an empty div. It will be as wide as the screen, since it's block level, but as tall as the text, which is nothing. So you don't need a minimum height, you just need a height or some actual content.
The background will only take up the space that the div is taking up. If the color and the image stop, that means the div has stopped. Try setting "overflow: scroll" just to see where the cutoff really is..
One thing that will make your life a lot easier with CSS is to not try to set everything all at once and make sure layout is good, then worry about cosmetics like background images and colors. Try give the troublesome div a background color of orange and a blue border. This will give you perfect idea of when things start and stop. Once you know the color is lined up, then try the background image.