I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
Related
I stumbled across a solution to a problem I was having with a website layout but wasn't sure if it was standard CSS practice or not. I've tested it on multiple platforms and browsers and it seems to be widely supported.
You can see what I'm talking about on this page.
The website linked to isn't my website but uses the same theme. I'm unable to post a link to my website as I'm working on it in a local environment.
The featured images are inside an element with position: absolute and the images themselves are set to width: 100% and object-fit: cover, and are unpositioned (i.e., static positioning).
The problem was I'm using product images and the object-fit: cover style setting was causing the images to get cut off.
The solution was to simply change the object-fit: cover setting to object-fit: contain which I understand is the default setting. This also centered the image even though the width of the images is less than the containing element.
It is happening because, when you use background-size: cover; it expands the image to cover the width of the div or element. In your case, image is being positioned center center that is why you have some top and bottom portion not visible. The only way I see to make this work is to increase the size of the element respectively with image or else resize the image to fit to the div.
If you want to check how it works. you can do this.
inspect element
change background-size: cover to contain
add css property height: 962px;
However, it is not a good idea.
I would suggest the keep it the way you have it now and adjust the background-position: if you want particular area of the image to be covered. or use the image that fit that div.
Also, the height of the div is being controlled with the content inside so make sure you have control on those content too. Easy way is to set min-height for the parent div with background image.
Let me know if this was helpful.
I want to create a polaroid style image using CSS. However, I'd like to square the image creating a large thumbnail so all images are the same size. I don't know the dimensions of the image beforehand and they are likely different. I was thinking of using a figure tag along with the figcaption to caption the photo. How do I create the thumbnail when the dimensions of the image are unknown. I looked at Create Resizing Thumbnails Using Overflow Property and Creating Thumbnails Using the CSS Clip Property, but neither seemed to account for unknown dimensions.
This Example uses the overflow technique to create a thumbnail by only setting the width, and the height of the image is auto set The container div then hides the excess image beyond what you want to show.
Then by simply using padding and container divs, you can create the white polaroid affect.
This Example lets the image have full 100% width, and find image with the shortest height, and applies this height to all the polaroid images so all the polaroids are the same height. If you aren't really worried about having them each the same height. Then do it this way
It is fairly simple with the figure and figcaption tags, and I was able to recreate the effect without any superfluous markup.
The really essential CSS is:
figure{height:155px; width:125px; overflow:hidden;}
and by applying position:relative; to figure as well, and using some relative positioning on the figcaption, you are able to get a neat Polaroid effect.
Demo
Because you suggested them, I'm sure you know how figure and figcaption are supported across browsers.
Clip only works with rectangles. Overflow will work fine, just define the width of the images in the class.
Example
Alright, I am designing a website using XHTML 1.0 Strict and CSS 1,2,3. And, I have a container for the page, that contains every div within the container, I have min-height specified on the container to ensure expanding of the page.
But, I have another container within the page container that contains a content div and sidebar div and all 3 of the containers inside the content container are set to height: inherit; and all have a min-height.
On the container which includes both the content and sidebar divs, I have a background gradient image which is positioned at the top and center, but am also calling out a background color which I want to continue as a sort-of fade-out effect, which would leave the container open for page expansion.
But, the problem is, the color is not repeating all the way down within the container.
You may view the design below, it is linked with a pretty well organized External Style Sheet. As well as the HTML page being well organized.
http://www.noxinnovations.com/portfolio/kolja/
Thank you very much StackOverflow,
I hope to hear from someone very soon,
Aaron Brewer
I'm not 100% sure if i understood your problem.
But adding:
this
float: left;
to this:
#content-container
Should do the trick.
That link gave me a 404 Page not found.
Perhaps you mean that you want to stretch the background-image using css? In that case I can tell you that such a thing is impossible. You cannot stretch css background images.
Usually when you want a gradient background you make a sufficiently long gradient and fill the rest of the background with the ending color of the gradient.
CSS 3 supports defining gradients as colors. W3C working draft of gradients.
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.
I'm having some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.
Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?
Kind Regards
You should be able to achieve this with css z-index. See the following links for more information:
W3C Schools explanation of z-indexes:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Indepth explanation of z-index's from Smashing Magazine:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.
A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.
-- Edit for real answer --
After looking at your images this is not actually that hard to implement. Here is how I would do it -
Set the background of BODY to white and the green/pink/gray background:
body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}
Set the background of the DIV to the gray image -
div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}
There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.