FAQ Database Discussion Community


Why isn't this div with background-image inside table-cell displaying at all?

html,css,css3,height,background-size
JSFiddle. Why doesn't .col-left-bg-image display at all? I just realized that it is not displaying because it does not have any content inside it. So I checked by putting ... into it and giving it a background-size:100% 100% (Initially it was auto 100%). But as a result, the div with...

CSS - Background-size not working on jpg extension

css3,background-size
.baner { background-image: url('ban.jpg'); background-size: cover; background-repeat: no-repeat; position: fixed; width: 100%; height: 35%; top: 60px; } Won't do cover on this background but when I do png image it works and I don't understand why: .baner { background-image: url('ban.png'); background-size: cover; background-repeat: no-repeat; position: fixed; width: 100%; height: 35%;...

Set the height according to the image with dynamic height

html,css,background-image,background-size
At the moment, I am using the following code: CSS .photo-medium { background-attachment : scroll; background-color : #222222; background-repeat : no-repeat; background-position : center center; background-size : contain; border-radius : 0; margin : 0 0 30px -10px; width : 100%; } PHP & HTML # VARIABLE $photo_750 = 'images/photos/'.$photo['data_file_name'].'-750.'.$photo['data_file_type']; #...

background-size transition on hover causes chrome to “shake” background image

css,css3,background-image,transition,background-size
I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have...

Getting the new height of backround image when using CSS background-size: cover?

javascript,jquery,css,css3,background-size
I'm using the background-size: cover; in CSS and whilst it works well, I have noticed that once it "kicks in" then you may have issues with the whole height of the background image not displaying. For example, I have code something like this: #home .top { min-height: 768px; background: #fff...

Reducing a background-image by a percentage of itself not of the parent element

html,css,background-size
I often use background images to display an icon within a rounded square. Sometimes I need to reduce the size of both the square and the icon in it for responsive purposes. But when I have several icons displayed as background images of different sizes, and I want to display...

DIVs with background-size

html,css,responsive-design,background-image,background-size
I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px) So I wanted to make a couple stacked divs, each with a background that gets resized via background-size....