7 replies [Last post]
codeWalrus
codeWalrus's picture
Offline
newbie
Last seen: 3 years 52 weeks ago
Timezone: GMT-5
Joined: 2015-11-20
Posts: 3
Points: 5

I've looked around and saw there are some different strategies to this.
1) Wrap the container that has the image with another image/color and change the opacity of the wrapper.
2) Neater and more efficient css.

I'm searching for option 2 as I'm new to this. I've also found there's some complexity to it because the background-image is in the body element and simply changing the opacity in the body element will effect all the child elements in the body.
Thanks.
Here's what I've got.

CSS

body { 
	text-align: center;
	}
 
body.moveyobody {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg");
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        background-size: cover; 
        background-repeat: no-repeat;
        width: 100%;
        height:100%;
	position: absolute;
	overflow: auto;
	left: 0;
	right: 40;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0; 
 
}
 
body.moveyobody {
	opacity: 0.5;
}
 
h1 { 
	color: white;
	font-family: Verdana sans-serif;
	border-radius: 10px;
	border: 5px solid orange;
	border-width: 100%;
}
 
 
 
.h1-bckgrnd {
	position: relative;
	font-size: 30px;
}
 
.h1-bckgrnd h1 {
	padding: 20px;
	z-index: 2;
}

HTML:

<!doctype html>
<html>
<head>
	<title>HTML Practice for Webdev course</title>
	<link rel="stylesheet" href="style.css">
	<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
 
 
</head>
<body class="moveyobody">
 
		<div class="h1-bckgrnd">
			<h1>The world is beautiful </h1>
		</div>	
 
 
</body>
</html>	

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 14 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

See

See https://css-tricks.com/snippets/css/transparent-background-images/

Or, you could start with a png image with the opacity you want.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

I honestly cannot figure out

I honestly cannot figure out the reasoning for making the body's background image transparent. It's already the background. Considering it logically, it seems like a conceptual mistake.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 14 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Agreed

There must be a spate of soi-disant web designers (more properly, graphic artists who know nada about web design), incorporating transparencies on the html and body elements.

(where have you been hiding out recently?)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

gary.turner wrote:... (where

gary.turner wrote:

... (where have you been hiding out recently?) ...

Ah, I guess it was my second time quitting the forum. Last time (as Triumph) I received a few rather obscene and threatening emails and my personal site got inundated with insults in the comments, all due to one post I made here in response to a noob that couldn't accept advice or admonishment, no matter how light. Being a guru/moderator at the time I had access to the secret buttons and in a moment of weakness I disabled my account. Moderation was so thankless and sometimes abusive. It just got tiring.

This second time (as verschwindende) after returning for a short time, I just got out of web programming. I guess I always did have a rough time helping people make tons of loot selling web sites they couldn't program without us and then looking at the single digit number in my bank account.

I did receive a few really nice "thank you" from one member so I guess that made me think I did at least a little bit of good.

To OP: Sorry for the off-topic post. Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

codeWalrus, if you could show

codeWalrus, if you could show us a photoshop mockup of your layout it is most likely that we could show you how to do it without a transparency in the background.

IndioBailBonds
IndioBailBonds's picture
Offline
newbie
Last seen: 3 years 48 weeks ago
Timezone: GMT-8
Joined: 2015-11-30
Posts: 3
Points: 3

LESS Compiler

I just want to add that you can use LESS CSS. You surely find the best and neat way of doing this thing by using LESS.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 14 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

LESS Compiler

IndioBailBonds wrote:

I just want to add that you can use LESS CSS. You surely find the best and neat way of doing this thing by using LESS.

Why, in what way? Less only adds a layer of complication that does nothing to improve the final product.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.