Need to blue background image but not text

  • Unknown's avatar
    mikea59 · Member ·

    Here’s my site: nextdoordev.com

    Here is the CSS I am using,

    .entry-summary {
	text-align: center;
}

.entry-title {
	font-size: 3em;
	text-shadow: 4px 2px 4px #000;
	z-index: 99;
}

code {
	font-size: 1em;
	color: #8f5656;
	background-color: #F1F1F1;
	text-shadow: 1px 1px 1px #cccccc;
}

a {
	text-shadow: 1px 1px 1px #cccccc;
}

#page {
	max-width: 3000px;
}

.entry-content {
	min-width: 65%;
}

.entry-background {
	filter: blur(5px);
	z-index: 1;
}

    Here is what I want to do:

    On my main homepage, the background images for each blog post are shown. I want to keep the images as they are originally on the homepage, but when a user clicks on a blog post I want the background image to now be blurred and have the blog post title sit on top, unaffected.

    I have played around with the z-index but to no avail. I think the problem is that the images I am using for each blog post have the same class name on both the homepage as well as the blog post themselves.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, add the following and adjust the 0.3 opacity value (what it is by default) and see if this gets you what you are looking for. The closer to 1 you get, the darker the image gets. 

    .single.single-thumbnail .entry-background::before {
	opacity: 0.3;
}
  • Unknown's avatar
    thesacredpath · Member ·

    The above doesn’t actually do what you were asking, but the problem is the blur filter will apply to all things within the div you apply it to, and the entry title is a child dive within the div that has the background image, so the title will blur as well. No way to keep that from happening.

  • Unknown's avatar
    thesacredpath · Member ·

    The above doesn’t actually do what you were asking, but the problem is the blur filter will apply to all things within the div you apply it to, and the entry title is a child dive within the div that has the background image, so the title will blur as well. No way to keep that from happening.

  • The topic ‘Need to blue background image but not text’ is closed to new replies.