mdloha.blogg.se - Text on image css responsive

#Text on image css responsive how to
#Text on image css responsive code

The top image will always be a little pushed down from the top and will align with the left edge of the container.

(Something to take into account when clients could upload any image via a CMS)

The component will work regardless of any height of either top or bottom image.

One of my ding dang favorite things about CSS Grid (besides the fr unit, or the min-max property) is the ability to overlap images by varying z-indices without taking a thing out of the normal document flow! First we’re going to analyze this component:

#Text on image css responsive how to

Method 1: CSS Gridīefore I start hearing grumbles about needing to support IE and how you can’t use CSS Grid, I say you can use CSS Grid and easily use a fall back for IE which I’ll show you how to do in the last section of this post.

I will write out two solid approaches to overlapping images without having content overlap our wonderful image component I’ll affectionately call the “image stack”. The good news: there is a much better way and do not attempt that first route unless you enjoy pain. Image-stack-bad-example by Bri Camp ( CodePen. It’s a dark place, I don’t recommend it.Īn example of what I’m talking about is here: The next thing you know, you’re found days later with no food or water drinking the last of your uncontrollable tears. To get around this, you might begin to try out arbitrary heights on the images and the component then becomes very fragile, limited, and hacky real fast. This is due to the height of the absolute-positioned image which is not recognized since it’s out of the document flow, (a normal behavior for an absolute positioned element). If the absolute-positioned element is taller than the static (top) image, the following content will overlap the images. Wellllll, once you need text or any other content after the images, you’ll run into a problem. One way you might approach it is you could absolutely position one element with a lower z-index to make the other image sit on top, adjust the widths on each image, so you can see both of them and call it day, right? When the design is handed to you, as the developer to implement it, there are a few ways to go about it like most things with CSS. I'm missing something small.Something very popular in web design currently is overlapping images.

#Text on image css responsive code

I've even tried emulating another site's exact code with my setup, and it still didn't work.

I've tried placing the "p" element outside of the "a" element, which isn't what I want, but that didn't work either. I also tried setting a background image to the "p" element directly, but, again, I have to set a fixed height to get it bigger than the text itself. I've also tried replacing the "img" with a "div" and setting the image as the background, but I couldn't get the image displayed without setting a fixed height, which wasn't responsive. I've tried different combinations of absolute and relative positioning as well as floats on all the elements except the ".main-content" and nothing is working correctly. I've tried so many things, and this is the best I've gotten. That's what I want, however as I expand the browser, the text keeps falling further left of center as the image expanded as intended, to fill 90% of the screen width. Now my problem.I'm trying to make this image responsive with the text, "Grand Canyon" horizontally centered, and just below vertically centered on the image, as displayed in the CodePen if you set the browser to 320x480. Hi! First off, here's my CodePen snippet, with all the relevant CSS to the containers supplied: