my background is not working. I don't know why. I dont know if i have to enter my full path (for example: C:/Users/User etc.) Maybe you can help me :O
Here is my code:
padding: 0;
margin: 0;
font-family: sans-serif;
}
.body {
background-image: url(bg.jpg);
background-size: 100% 100%;
background-attachment: fixed;
}
.container {
background-color: white;
}
.header {
text-align: center;
padding-top: 8px;
padding-bottom: 14px;
background-color: #878787;
}
.main {
float: right;
padding-top: 40px;
padding-bottom: 20px;
margin-right: 50px;
}
body is a html element and not a class.
So delete the . before the body.
body {
background-image: url("bg.jpg");
...
}
share directory structure so that we could know better.
if the css file and bg.jpg are in same folder then you could try
background-image:url("./bg.jpg");
Related
The background image is covered by white area when you scroll all the way to the bottom. Cannot seem to figure out what it is. Played with each of the selectors and HTML. Would appreciate help. Please click link go to the CodePen where the code is visible.
https://codepen.io/siamazing/pen/QaGdWq
html, body{
height: 100%;
}
#body {
background-image: url(https://images.pexels.com/photos/267278/pexels-photo-267278.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
height: 100%;
font-size: 15px;}
.container-fluid {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
height: 100%;}
h2 {
padding-left: 20px;
font-family: 'pacifico';
font-size: 22px;
color: #72777f;
}
header {
text-align: center;
font-family: 'pacifico';
}
article {
font-family: 'raleway';
background-color:rgba(255,255,255,.4);
color: #303338;
padding: 10px;
margin-top: 20px;
margin-left: 30px;}
Remove height:100% from #body
https://codepen.io/mirohristov/pen/MrbmWj
See Miro's answer, but here's some troubleshooting advice.
I added * { outline: 1px dashed red; } and saw this:
That made it easier to find the culprit element - #body and remove the height:100%; rule.
I followed this tutorial:
https://www.youtube.com/watch?v=on7p8oqfv80
I cannot seem to add background image to a class. This image link does work, I have opened in browser and I have also previously added it using "img src=", directly into the html. It works.
I know the stylesheet is being linked properly, because the style of the text changes.
I have tried adding a width, using single quotes instead of double quotes, tried using background-image instead of background. I have tried using a local image and yes I am on Linux and yes I have chmod 777 on all files in that directory, just to be sure. I have tried all of the different solutions offered across these following links:
Cannot add background image to my <div>
How to add background image in css?
Cannot add background image to my <div>
Tried this on Firefox, Chrome and IE across Linux, Windows and Mac.
Here is the code
var errorCallback = function(e) {
console.log('Reeeeejected!', e);
};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia(
{
audio: true,
video: true
},
function(stream)
{
video.src = window.URL.createObjectURL(stream)
},
errorCallback);
} else {
video.src = 'somevideo.webm';
}
* {
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
}
/*---Start Parallex---*/
.parallax {
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
*/ background-size: 100% 100%;
width: auto;
}
.parallax-inner {
padding-top: 50%;
padding-bottom: 50%;
}
<h1> Space </h1>
<section class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
It's a typo issues like in your style sheet you are designing parallax but when you added the class to the section you added parallex correct your style sheet and it will work:
*{
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
.parallex {
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: auto;
}
.parallex-inner {
padding-top: 50%;
padding-bottom: 50%;
}
*{
margin: 0;
padding: 0;
border: 0;
}
h1 {
text-align: center;
font-size: 575%;
color: #4A4444;
text-transform: uppercase;
letter-spacing: 1%;
margin: 45% 0;
}
h2 {
text-align: center;
font-size: 275%;
color: #E5E5E5;
text-transform: uppercase;
letter-spacing: 1
}
/*---Start Parallex---*/
.parallex{
float: left;
border: 5px groove;
margin-left: 70px;
width: 100px;
height: 100px;
background: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%;
background-size: 100% 100%;
width: 100%;
}
.parallax-inner{
padding-top: 50%;
padding-bottom: 50%;
}
<body>
<h1> Space </h1>
<section class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
</body>
I fond some spelling errors and syntax errors.
Hope this will help you abit on the way!
I tried your code using a local image file and found that the background image display but when it is passed directly(either to section or div)
<section style="background-image: url('049.JPG');" class="parallex">
<div class="parallex-inner">
<h2>Space</h2>
</div>
</section>
I have to add that using the correct classes as suggested here already and removing */(surely a bug) after your background-image declaration returned me no positive result...apart from when I tried directly
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
Trying to use an image as the background of a div. It just will not show up. I now have the pic in the same directory as my index.html page.
h1{
font-family: 'Oldenburg', cursive;
text-align: center;
}
header{
text-align: center;
}
h2{
font-family: 'Allura', cursive;
text-align: center;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.menu{
font-family: 'Indie Flower', cursive;
text-align: center;
font-size: 2em;
background-image: url("redone.jpg")
}
a{
color: black;
}
.main{
height: 500px;
border-style: solid;
background-image: url("images/redone.jpg");
}
<!-- AND -->
<div class="main">
I figure I have the syntax correct, I just have nothing else to try...
Thanks for any help.
URLs in CSS are relative to the location of the .css file. For instance if your directory structure looks like:
/styles/site.css
/images/redone.jpg
/somepage.html
If you referencing images/redone.jpg in your CSS it will look for redone.jpg at /styles/images/redone.jpg.
To correctly resolve the URL you could either keep the URL relative and go down a directory before going to images:
.main{
height: 500px;
border-style: solid;
background-image: url("../images/redone.jpg");
}
Or use an absolute URL:
.main{
height: 500px;
border-style: solid;
background-image: url("/images/redone.jpg"); /* note the leading slash */
}
I was trying to create a button using CSS. The html code looks like
<div class="content">
<img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
<span class="fon">Google</span>
</div>
And CSS is
.content {
width: 120px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
}
.content img {
margin: 5px;
float: left;
}
.fon{
position:relative;top:5px;
}
I'm getting output as expected, but I wanted to reduce repetitive html code and move them to CSS, so that I just need to write code similar to below code and should show same output :
<span class="mybutton">Google</span>
Here is my JSFiddle
http://jsfiddle.net/WW4N6/678/
html
<p class="mybutton">Google</p>
css
.mybutton {
background: #2d3f51;
color: #f5f5f5;
display: flex;
align-items: center;
height: 30px;
width: 100px;
padding: 0 5px;
}
.mybutton:before {
content: '';
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png');
background-size: cover;
width: 20px;
height: 20px;
display: inline-block
}
JSFiddle: http://jsfiddle.net/WW4N6/681/
css
.mybutton {
width: 90px;
height: 30px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
background-size: 20px, 20px;
background-repeat: no-repeat;
background-position: 5px;
padding-top: 10px;
padding-left: 30px;
}
jsFiddle link
http://jsfiddle.net/joshchurning/9sysby5f/
you could use css's background property for your button:
.mybutton {
....
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
....
}
If you want to get rid of the HTML code (the width and length of img, I'm assuming), you could just put the width and height in your .content img CSS class
.content img {
margin: 5px;
float: left;
width: 20px;
height: 20px;
}