I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 0.9;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
Here's a hacky way to do it...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
</html>
Not optimal, but it's quick and easy, all I did was add opacity using an image editor.
Please download the image here.
https://jaymartmedia.com/example/kitten.png
Hope this helps.
You forgot a semi-colon after opacity, as well as it's measured in percentage. Fixed code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
Convert to PNG and make the original image 0.2 opacity
because if u give opacity for body...it will effect to all contents inside the body including bg image.
CSS: set background image with opacity?
Opacity applies to entire container and thus resulting the effect in either the background and the content.
A good solution is to use a PNG with your desired level of opacity and apply it to a child container. In your case, you can apply to your .container.
With using this method, you can easily switch the background image anytime you need without worrying about its opacity level:
.container{
background-image: url('transparent.png');
}
The transparent.png image will be place on top of your background image.
Another way to do this:
<head>
<title></title>
<style type="text/css">
.my-container {
z-index: -1;
opacity: 0.2;
position: absolute;
}
</style>
</head>
<body>
<div class="my-container">
<img src='http://placekitten.com/1500/1000'>
</div>
<div class="container">
<article>
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
try use alpha filter in your section or background div, doest work if u link img on div and set opacity on body,
try this
.youclass {
background-image:url(../img/welovecats.jpg);
opacity:0.60;
-moz-opacity: 0.60;
filter: alpha(opacity=0.6);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;}
html
<html>
<body>
for section
<section class="youclass">
content
</section>
</body>
</html>
use body for only main items like data-target, scroll scripts, normalizes and other stuffs
Related
So tag never seemed to like me a lot. It always caused me problems, but it was always turning out that their solution was obvious and I was just stupid. But this time, I am spending 4TH HOUR trying to figure out what could've gone wrong (this is exactly why I even named a body content div "body", IK this is unnecessary lol). Here is the code:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive; color:white;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>
<p style="position:absolute;top:140px;left:20px;">This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</div>
</body>
<!--break-->
</html>`
It's because the <div class="body"> has a height of 0. It only contains absolute positioned elements, which don't take up any space, so its basically empty.
Some suggestions:
Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.
Avoid absolute positioning. It basically breaks how CSS works which makes it difficult for beginners.
EDIT: One more thing: You have a opening <strong> tag without a closing </strong>. Keep in mind you can't put block elements (such as <p>) inside inline elements such as <strong>.
I found your mistake.
Navigate to html tag, there you can see the style attribute, with color=white.
This is making all the text white, which is same as canvas therefore it is invisible.
Now, the text tags are absolutely positioned, meaning they are outside the flow, so the height and width of the DIV is 0, so you cannot see any color because the div is essentially a 0x0 box.
I have adjusted the changes, please check:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p>Hello</p>
<p>This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</strong>
</div>
</body>
<!--break-->
</html>`
I don't think it's about where <style> is.
But it's your children (elements) are postition: absolute; so .body is 0 height.
Try:
<div class="body" style="height:100px">
So you I will see the problem
(This is just testing, please look at RoToRa's answer)
Because it's outside of closing </head> and opening <body>
It supposed to be between <head> and </head>
I am trying to learn html 5, I am trying to reproduce the rules to my current favourite game Camel Up (or Camel Cup) and am trying to be a good person and not just use a table, this is what i am trying to achieve
this is what i am getting
here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CamelCup Rules</title>
<style>
body {background-color:#f3d7a0; font-family:cursive}
#wrapper {width:1000px}
.float-left { float:left;width:40%;padding-right:5px;padding-left:5px;}
.float-right {float:right;width:40%;padding-right:5px;padding-left:5px;}
#banner-text{ font-size: smaller;}
.red-label {font-size:medium; color:red;vertical-align:top}
h1 {color:red; text-align: center; font-size:40px}
.full-width {width="100%";}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="full-width">
<div id="logo" class="float-left">
<img src="logo.PNG">
</div>
<div id="banner-text" class="float-right">
<p>
Witness the craziest camel race of all time, as things really go topsy-turvy when
camels stack up and entire pyramids turn upside down.
As members of Egyptian high society, you gather in the desert with one simple
goal: to gain the most money by backing the right camel to win a leg or even the
entire race. However, in this race, it’s not just the lucky ones who can beat the
odds. Reading the dynamics of the race and having a good sense of timing is just as
important when it comes to backing the right camels and taking the victory.
</p>
</div>
</div>
</header>
<section id="contents" class="full-width">
<h1>Components</h1>
<div id="pyramid" class="float-left">
<label class="red-label">1 Pyramid</label>
<img src="pyramid.png">
</div>
</section>
</div>
</body>
</html>
if I make it variable width and enlarge my browser it looks like this (this is in response to an answer telling me to make it variable width but i can't see where to add pictures to comments)
This rule has an error in it:
.full-width {width="100%";}
should be
.full-width {width: 100%;}
Make these Changes:
Remove "" from .full-width
.full-width {width: 100%;}
Add this styling
#contents{clear:both;}
Also change width of #wrappper from 1000px to 100%
wrapper {width:100%;}
I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?
You can use box-sizing: border-box;
Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across
body{
margin:0;
padding:0;
background-color:white;
font-family:sans-serif;
font-size:14px;
}
#wrapper{
margin-top:10px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:550px;
}
<!DOCTYPE html>
<html>
<head>
<title>advanced website one</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="advanced1.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<img id="logo" src="images/logo.png" alt="logo image"/>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<content>
<h2>About Blue Micro</h2>
<p>Blue Micro is meant for a site that doesn't necessarily need a huge amount of content. I've found that trying to put a small amount of text onto a large template ends up in a site that looks slightly off. So this template is for those that need a quick and simple site</p>
<h2>Titles are H1 Tags</h2>
<p>Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
<h2>Background Image</h2>
<p>I debated using a fancy background for this template, but ultimately just decided to keep it blank. I did however create all the images with Alpha transparency, which means that regardless of what background you choose, it will always look good. So keep it white, or experiment with it if you please.</p>
<h2>XHTML 1.1</h2>
<p>This template validates as XHTML 1.1 - this is to ensure it'll work for many years to come, and it makes it really easy for you to modify.
Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
</content>
<footer>
free xhtml template by web page designer
<!-- begin snippet: js hide: false console: true babel: false -->
</footer>
</div>
</body>
</html>
I want to do this "see border" border in css, its not that hard but i'm newbie at web development. This border is linear gradient and has radius and i think internal radius
here is the logo image logo image
border
.border {
float: left;
background-image: url(gradient_rectangle_back.png);
background-repeat: repeat-x;
background-color: #4586F1;
width: 547px;
margin-left: 14px;
clear: both;
margin: 0 auto 0 auto;
}
You also need to download this graphic
http://www.quackit.com/html/templates/download/bryantsmith/bluemicro/gradient_rectangle_back.png
problem 1.Fonts wont change
problem 2.Height on the "id's" wont change
problem one, is there something out of place with the font codes?
<head>
<title>Jubilee Austin Developer</title>
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
</head>
problem two, Ex. this is 1 of the 3 "id's" i have. its not responding to the CSS or at least its not physically showing height change
<section id="about">
<div class="full-width">
<h2>A little bit about me</h2>
<div class="half-width">
<p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now i've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
My entire css
/****Base syles***/
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
Entire code in case you need it for anything
http://i.stack.imgur.com/Q73h1.png
If i left anything out that you need please feel free to ask
About the height part: You won't see the height if the content is less high than the parent element and if there is no background or border. Add something like border: 1px solid red; to see the full height of your element.
#about, #work, #contact {
height: 600px;
border: 1px solid red;
}
Simply invert the order you call your styles:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" type='text/css'>