Because the div1 and the div4 contain background-image gradients and unable to apply a url image on top of the background-image gradient. (your example uses a solid background)
It should be possible.
The only solution I have found so far is by applying the inner div.
The code that I posted does not work properly. Let me do some more testing. I’m sure the result you seek is possible, but I screwed up my attempt pretty bad. I need to give it another go.
I have found a multiple background solution but it will mean multiple lines of coding for each image applied.
Guess I’ll have to live with the long css scripts for every image on the site.
Yes, I started toward the multiple background solution but my thought process went badly astray. Too many innerdivs. The text cells (same location as your text boxes) in my layout should not have the a:p innerdivs.
It would have been very helpful to have your test layout from the start instead of or in addition to the image.
Too much wasted guessing.
I’ve managed to do it without the inner div but the site is going to contain 20 or so images and didn’t want such a large css file.
background-image: url('../images/air_gauge.png'), -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #C40101),
color-stop(1, #A00101)
);
background-image: url('../images/air_gauge.png'), -o-linear-gradient(bottom, #C40101 0%, #A00101 100%);
background-image: url('../images/air_gauge.png'), -moz-linear-gradient(bottom, #C40101 0%, #A00101 100%);
background-image: url('../images/air_gauge.png'), -webkit-linear-gradient(bottom, #C40101 0%, #A00101 100%);
background-image: url('../images/air_gauge.png'), -ms-linear-gradient(bottom, #C40101 0%, #A00101 100%);
background-image: url('../images/air_gauge.png'), linear-gradient(to bottom, #C40101 0%, #A00101 100%);
background-repeat: no-repeat, repeat;
background-position: bottom right, 0px 0px;
Yes, multiple backgrounds is what I was thinking. But I don’t see how it’s more code than having an extra div that brings height problems and requires its own class and background properties.
1 Like
Can you restore your test page to its former glory? Get rid of my junkie code.
Thought that a few lines could cure all, rather than 100 lines for a handle full of images.
Oh well atleast the workaround is displaying as intended.
Thanks Guys
Also note the media query. Not sure if you want that, but I think it will look better for mobiles.
Edit
This version, the elements are re-ordered in the html for better semantics, with the titles before the text boxes. One of the great features of flex is re-ordering via css.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.