Problems with linear gradient and background image showing properly

Okay so I’m completely new to CSS and HTML but here goes.

I’m working on a Wordpress site with WooCommerce where every single product page will have a unique background image and will also have a linear gradient. So at the top of the screen there will be a clear image and as you move down the product page you’ll see that the image blends into a certain colour (in this case a blue).

Now I know I’m misunderstanding something but I’m not sure where. I seem to be able to add an image as a background OR insert a gradient using CSS3 but I can’t seem to combine the two despite going through forums and searching everywhere.

Please someone point me in the right direction and let me know what I’m doing wrong and also how this process can be streamlined.

The URL for the product page is https://finalbossgaming.co.uk/product/steam/oxenfree/

Don’t judge the overall look of the site yet as it’s nowhere near finalised and I know a lot of text colours will need to change based on the background image, colours, transparency.

All and any help is appreciated.

@ryansmith1979,

The key word in your issue seems to be “properly” which is not clearly defined. More correctly, I can’t tell which images and containers your are talking about.

Ideally, we would ask you to post a stripped down “working page” that demonstrates the problem area, but you did say that you are very new to HTML and CSS.

Because I don’t appreciate the issue, I’m posting some code that places a background image with transparency over a gradient and will leave it to you to figure out how to apply the image/gradient concept to your own page, or provide more information that will help us narrow down what you wish to do and to what elements. My demo is probably miles away from you needs, but it’s a start. :slight_smile:

Copy the following code to a new HTML file and double-click the file to open it in your favorite browser. Nothing moves and nothing resizes. It’s just a demo of an image over a gradient and the simple code that does it.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/problems-with-linear-gradient-and-background-image-showing-properly/274862
-->
    <style>
.outer {
    max-width:1052px;
    margin:0 auto;
}
.imgovergradient {
    height:744px;
    background:url(https://upload.wikimedia.org/wikipedia/commons/c/c6/Skeleton_diagram_of_a_cat.svg),linear-gradient(to bottom, skyblue, pink);
}
    </style>
</head>
<body>

<div class="outer">
    <div class="imgovergradient"></div>
</div>

</body>
</html>
2 Likes

Thanks so much for taking the time to help me! I think you’re absolutely right, as I’m so new I can’t really explain the problem in the detail needed to get a full answer but what you’ve actually done has almost nailed it!

I added the following code to my custom CSS and it just needs tweaking with colours etc. background:url(https://upload.wikimedia.org/wikipedia/commons/c/c6/Skeleton_diagram_of_a_cat.svg),linear-gradient(to bottom, skyblue, pink);

There are a few more things that I need the background to accomplish which I’ll try to explain with examples.

Example URL - http://store.steampowered.com/app/346110/ARK_Survival_Evolved/

In this example you can see that the background image is overlaid with a blue colour that fades out and descends into a solid colour by the time you scroll to the bottom of the page. I know that this is done via CSS3 but can’t seem to find the right combination to get the same effect. Is it a transparency gradient I need?

Once again, apologies if I haven’t made it clear enough, hopefully this example will assist in showing you what I mean.

There are a number of ways to do this but depends on the exact behaviour needed. Here is an example with a black transparent linear gradient overlaid on top of an image.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
	margin:0;
	padding:0;
}
body {
	background:#000;
	color:#fff;
}
body:before {
	content:"";
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(http://www.pmob.co.uk/temp2/template1/images/home-bg1.jpg) no-repeat 50% 0;
	background-size:cover;
	position:absolute;
	z-index:-1;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
</style>
</head>
<body>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
</body>
</html>

Codepen example:

Just change the black in the body background and the black in the rgba to a colour of your choice. You can also change where the transparency kicks in by setting some percentages to the linear gradient.

background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3) 60%, rgba(0,0,0,1) 100%), url(http://www.pmob.co.uk/temp2/template1/images/home-bg1.jpg) no-repeat 50% 0;

1 Like

Fantastic @PaulOB this is exactly what I’ve been looking for. I’ve just tested it out and with a bit of tweaking this will be perfect. I just need to get this streamlined to get ready to roll out over 1000 products now!

Thanks so much for your help and also to @ronpat too, you’ve both been invaluable!

1 Like

If you use the image that I linked to in my demo, please read the Wikipedia article about that image and include the required attribution for the author.

It is also expected that you download the image and serve it from your host rather than link to the Wikipedia image. :slight_smile:

I’ve used a more suitable image hosted by myself, but thanks for the tip.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.