Struggling to write CSS to format the image so that it covers the entire background of the page, as it doesn't seem to be able to do so below. It seems to be getting stuck up on the header and I am not sure how to correct that.
margin-top: 0px;}
h1 a {
background-color: black;
font-size: 40px;
color: white;
margin-left: 40px;
padding: 10px 20px;
letter-spacing: -1px;
text-decoration: none;
font-weight: bold;
}
.sidenav {
width: 150px;
position: fixed;
z-index: 1;
top: 85px;
left: 10px;
/*background: #ffffff;*/
overflow-x: hidden;
padding: 8x 0;
}
.sidenav a {
padding: 4px 1px 4px 40px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
font-weight: bold;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
}
Make the image the background of the body or a div (is how I would do it).
CSS:
body {
background: url("");
}
or
.coolbackground {
background: url("");
}
You can set how it covers the page using:
background-size: ;
and
background-repeat: ;
Else if you dont want to do that, use a float, absolute positioning and z-index.
Related
I'm coding a webpage using CSS and PHP. Whenever I add a new element it's pushed down to the bottom of the page. I thought it was a one time thing only affecting a paragraph so I added negative margins for it (not great practice, I know), but every element I add is getting pushed to the end of the page and I have to scroll to find it.
The paragraph below was the part getting pushed down, the login heading remained at the top, but when I tried adding more text after, it got pushed down as well.
#import url('https://fonts.googleapis.com/css2?family=Urbanist:wght#500&display=swap');
* {
width: 100%;
height: 100%;
}
h1 {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 30px;
line-height: 0px;
margin-bottom: 0px;
}
p {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 20px;
line-height: 0px;
margin-top: -740; //I added negative margins because this element was being pushed downwards and that solved it, but I don't want to have to do it with every new element.
}
body {
padding: 0;
margin: 0;
}
header {
height: 60px;
background-color: #1e3799;
}
ul {
float: right;
right: 30%;
}
ul li {
display: inline;
list-syle: none;
}
ul li a {
text-decoration: none;
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 18px;
padding: 0px 0px 0px 20px;
}
footer {
position: absolute;
bottom: 0%;
width: 100%;
height: 60px;
background-color: #1e3799;
text-align: center;
margin: 0 auto;
}
footer p {
color: white;
font-family: 'Urbanist', sans-serif;
}
body {
background-color: #4a69bd;
}
<h1>Log In</h1>
<p> No Account?<a href="register.php">Register here!</p>
Don't use width and height 100% for *.
This * means use it every element on
p {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 20px;
line-height: 0px;
margin-top: -740; /* You forgot to add 'px' here */
}
Change this to these to full page with preserving background color.
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
You also forgot to close <p> No Account?Register here!</p> tag.
I don't suggest you use this if you don't know what you are doing line-height: 0px;
Here is complete fixed code. I aligned some items because the way of coding I thought you want to center footer items.
* {
padding: 0;
margin: 0;
}
h1 {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 30px;
/* line-height: 0px; */
margin-bottom: 0px;
}
p {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 20px;
/* line-height: 0px; */
/* margin-top: -740; */
/* You forgot to add 'px' here */
}
body {
background-color: #4a69bd;
width: 100%;
height: 100%;
}
footer {
position: absolute;
bottom: 0%;
width: 100%;
height: 60px;
background-color: #1e3799;
}
footer, p {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Urbanist', sans-serif;
}
a {
margin-left: 10px;
color: white;
}
<h1>Log In</h1>
<footer>
<p> No Account?Register here!</p>
</footer>
It may be because you have given all (*) a height of 100% in your css
Writing two paragraphs, these are spaced apart. My paragraphs are very far and I don't understand why.
I tried to unlink css files, between the two paragraphs there was an empty line: missing in the code.
My page:
<div class="sharp">
<p class="title">Chi sono?</p><p class="content">Seguimi su Twitter!</p>
</div>
All my CSS:
*{
margin: 0;
height: 100%;
}
.title{
color: #2d3436;
text-align: center;
text-shadow: 3px 2px #b2bec3;
font-size: 50px;
font-weight: bold;
}
.content{
color: #2d3436;
text-align: center;
text-shadow: 2px 1px #b2bec3;
font-size: 25px;
font-weight: lighter;
}
hr {
width: 95%;
height: 2px;
margin-left: auto;
margin-right: auto;
background-color:#666;
border: 0 none;
margin-top: 20px;
margin-bottom:20px;
}
.space{
height: 100px;
}
.dark{
margin: auto;
padding: 20px;
background: #000;
color: #fff;
width: 85%;
height: 80px;
}
.sharp{
margin: auto;
padding: 20px;
background: #fff;
border-radius: 25px;
border: 1px solid #dfe4ea;
width: 85%;
box-shadow: 5px 10px 8px #888888;
}
body{
width: 100%;
background-image: linear-gradient(45deg,#ced6e0,#ced6e0);
background-repeat: no-repeat;
background-size: 4000px 4000px;
}
.img-container{
background-image: url(../data/images/hero.png);
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index:1;
}
.inner-container{
text-align: center;
width: 100%;
color: #fff;
position: absolute;
height: auto;
margin-top: 200px;
}
h1{
font-size: 7em;
font-family: "Shadows into Light", Sans Serif;
}
h2{
margin-top: -17px;
font-family: "Source Sans Pro", Sans Serif;
font-size: 1.7em;
text-align: center;
font-weight:400;
}
a{
margin-top: 20px;
font-size: 1.3em;
font-family: "Source Sans Pro", Sans Serif;
}
.btn{
display: inline-block;
width: 200px;
font-weight: bold;
padding: 10px;
color: #fff;
border: 4px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn:hover,.btn:active{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
#media only screen and (max-width: 920px){
.inner-container{
margin-top: 100 px;
}
}
#media only screen and (max-width: 540px){
.inner-container{
margin-top: 150px;
}
h1{
font-size: 5em;
}
h2{
font-size: 1.4em;
}
The two paragraphs are too far apart. I hope someone can help me...[How the page looks.][1]
By writing *{height: 100%} in your css, you are telling it to make every element (aka *) take up 100% of the available height. In doing so, your first paragraph is taking up all the height it can, pushing the second one all the way down.
If the only element you want to ensure has a 100% height is the white background, consider styling it individually.
The
*{
height: 100%;
}
part of your CSS file is telling every element on the page to be the same height as the window, so the second element is pushed down. If you remove that line from the CSS file the problem will go away.
Problem solved by giving
height: 10%;
to the paragraphs.
For some reason the background color refuses to change from white. I am trying to get it to change from white to black under the header, but it refuses to change. Putting "background-color:" in the body SCSS doesn't seem to change it.
I am not sure if there is something in my SCSS that is simply over riding the background color without me realizing?
Any help is greatly appreciated
SCSS:
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-color: '#010101';
}
#wrapperHeader {
width: 100vw;
height: 210px; /* height of the background image? */
background:url(images/header.png);
}
div#wrapperHeader div#header {
width: 100vw;
height:100px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width: 100vw ; /* the width of the logo image */
height: 210px ; /* the height of the logo image */
margin:0 auto;
}
header {
color: white;
background-color: dimgrey ;
clear: left;
text-align: center;
}
.toggle_menu{
position: fixed;
padding: 17px 20px 15px 15px;
margin-top: 210px;
color: white;
cursor: pointer;
background-color: #000;
z-index: 1000000;
font-size: 2em;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 100vh;
max-width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0,9;
transition: all 0.3s ease-in-out;
}
.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: red;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1 ;
}
.boxed_item {
font-family: 'Open Sans';
font-weight: 200;
padding: 10px 20px;
display: inline-block;
border: solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;
}
.logo_bold{
font-weight: 800;
}
.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}
.nav_selection{
margin: 0, 0;
display: block;
width: 200;
margin-top: 100px;
margin-left: 5px;
}
.nav_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s ease-in-out;
}
.hide_menu{
margin-left: -250px;
}
.opacity_one{
opacity: 1;
}
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6;
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s ease-in-out;
}
At three place you have give the background color code in three different style.
Please follow anyone format.
Never give the color in the quotation mark. You have given it in *{ background-color: '#010101'; } remember that. It should be *{ background-color: #010101; }.
You have given background-color: dimgrey ; so each time the color name is not working you have gave the color code for that.
This is header part for which you have to make change. for dimgrey the color code is: #696969 so your code will be:
header {
color: white;
background-color: #696969; // check this line.
clear: left;
text-align: center;
}
It will make the change in the header parts background color. you have to check only that part.
It may be possible that other style will be override the background of header. In that case you have to put the !important in the code like this:
header {
color: white;
background-color: #696969 !important; // check this line.
clear: left;
text-align: center;
}
Let me know if it help you.
Change background-color: '#010101'; this to
background-color: '#010101!important';
I'm having problem using images on my project. I want it to look just like the first two images. When I tried to fix the height of the images via CSS, it becomes ugly. Is there a way that it will just resize by itself without overlapping like what happened on the third image?
CSS :
.product-image-wrapper{
border:1px solid #F7F7F5;
overflow: hidden;
margin-bottom:30px;
}
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h2{
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
}
.product-overlay h2{
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
.productinfo img{
width: 100%;
}
.productinfo{
position:relative;
}
.product-overlay {
background:#FE980F;
top: 0;
display: none;
height: 0;
position: absolute;
transition: height 500ms ease 0s;
width: 100%;
display: block;
opacity:;
}
.single-products:hover .product-overlay {
display:block;
height:100%;
}
.product-overlay .overlay-content {
bottom: 0;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.product-overlay .add-to-cart {
background:#fff;
border: 0 none;
border-radius: 0;
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 15px;
margin-bottom: 25px;
}
.product-overlay .add-to-cart:hover {
background:#fff;
color: #FE980F;
}
.product-overlay p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #fff;
}
JSFiddle
What my actual page look like:
Cropping the image to the right size is probably your best bet. Other alternatives would be creating a div that wraps around the third image, and giving that div exact dimensions and setting overflow:hidden. That will basically crop the image. Honestly I think you are better off cropping the image yourself though, because then its easier to control what shows up. You'll have to deal with cropping in some way if you want to avoid stretching.
I'm trying to get my background image to show at the top center of the page. The image works fine if I do:
<style>
body {
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
}
</style>
I can't seem to work out where I've gone wrong. There must be something I've managed to mess up, I just can't see it. Here is the CSS:
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
/* Typography */
.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}
.header h1 em {
font-size: 1.200em;
font-style: normal;
}
h1 {
font-size: 2.2em;
color: #fff;
}
.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}
.content h2 em {
font-size: 1.2em;
font-style: normal;
}
.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}
.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}
#banner p {
text-align: center;
}
/* Navigation */
#nav {
margin: 4px 4px 40px;
}
#nav ul {
padding: 0;
margin: auto;
list-style: none;
}
#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}
#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}
#nav ul li a:hover {
background: #e0d0e0;
}
/* Content */
.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}
.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}
.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}
div#about {
padding:25px;
min-height: 255px;
}
img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}
div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}
#media screen and (max-width: 650px) {
.container {
width: 90%;
max-width: none;
}
div#footer {
width: 90%;
}
}
Try to change your path for example:
background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;
Because you are in a subfolder, you have to go up of a level I think
Most likely your css file is in a different folder and therefore needs another path to the image file.
The common way is to put css in a separate css/* folder, so the path should be:
url('../img/top_logo_blank_small.png')
This CSS seems to work fine, are you certain that the image exists?
http://jsfiddle.net/ghsNR/
I've just tried it here and it works fine with an image from http://placehold.it/
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}
The most likely cause after observing this is that your CSS isn't actually locating your image correctly. I suggest using tools like the Chrome dev tools, or Firebug to inspect the absolute path that the browser is trying to use to load the image and moving forward from there.
Is the css in the same folder as the page? If you have a different folders, you need to change the URL accordingly.
Maybe change the URL to
'../img/top_logo_blank_small.png'