On each of the images heading the different sections of my page, there’s a gradient that fades to white. However, it isnt’ really working on my tablet. How can I make it fill the whole div? Intended Appearance:
As you can see, the top pixel of each image has no gradient over it, which ruins the feel of the image completely fading to white instead of abruptly ending. How can I fix this?
I am sorry to report that I believe your only fix for this is going to be either: edit the images to include the gradient, OR create a container div for the images that is one pixel taller than the image, and apply the gradient to yet another div that would sit atop the image.
Since it seems like you are trying to use only part of the images anyway, I would suggest just cropping the images and applying your gradient in whatever image editor you use. Lower file size + the total control over the effect you desire = win.
Actually, you could do it with a container div by applying the gradient to it, then inserting the image and giving it a negative z-index value. Now that I think of it, that may solve the issue altogether.
I would test it, but I don’t have my tablet with me.