I just uploaded my first site that I created to a server, but not everything is working. I have a couple of pictures which are inserted using the CSS "background : url() " property but for some reason the pictures aren't showing up. I've tried putting the pictures in different folders and changing paths. The pictures are currently in the main directory so this is how my code looks like:
body {
/*background: linear-gradient(#2c3e50 75%, #ecf0f1 95%);*/
/*background-color: #2c3e50 ; */
/*background-color: #c0392b; */
margin: 0;
padding: 0;
background: url("Elegant_background-3.jpg");
background-size: 100% 100%;
}
#main-container {
/*border: 1px solid black;*/
width: 960px;
height: 445px;
background: url("towncar.png") top center no-repeat;
display: block;
}
Any tips? The pictures were first in a 'pics' folder but I moved them and put them in the main directory
Here's the site: www.bayareasedans.com
Firstly the images will be source from the css relative to the css file (so presently they are being looked for at http://www.bayareasedans.com/css/Elegant_background-3.jpg, check the F12 developer tools), and secondly it appears you are on a Linux server, and case DOES matter, so Elegant_Background-3.jpg (notice with the captial 'B') worked fine for me under http://www.bayareasedans.com/Elegant_Background-3.jpg.
towncar.png works fine, no case issue assuming you get the path correct of http://www.bayareasedans.com/towncar.png as presently it is looking for it at http://www.bayareasedans.com/css/towncar.png
so changes required to the css are (assuming you do not move the image files form the root)
body {
/*background: linear-gradient(#2c3e50 75%, #ecf0f1 95%);*/
/*background-color: #2c3e50 ; */
/*background-color: #c0392b; */
margin: 0;
padding: 0;
background: url("/Elegant_Background-3.jpg"); /** Here **/
background-size: 100% 100%;
}
#main-container {
/*border: 1px solid black;*/
width: 960px;
height: 445px;
background: url("/towncar.png") top center no-repeat; /** and Here **/
display: block;
}
Relative URLs in CSS are relative to the location of the CSS file.
So for example if you're targetting a file in the root folder, from a css file in the css/ folder, then use:
url("../towncar.png")
Related
I'm trying to add a background image to a div. The image is in the same folder as my CSS file. I am certain the path is right because it was working earlier and I copied the path directly from my computer.
Why does the path CSS\presentation.jpg not work? What am I missing?
Thank you!
.second-container {
position:relative;
text-align: center;
padding: 20px 0 20px 0;
background-color: #edffea;
background-image: url("CSS\presentation.jpg");
}
In css file we use relative paths, so correct style will be
.second-container{
position:relative;
text-align: center;
padding: 20px 0 20px 0;
background-color: #edffea;
background-image: url("presentation.jpg");
}
My problem is as follows: I replaced some items (navigation, footer) in my HTML-code by adding objects instead and loading them externally. Since I did that, I can't load background pictures into my 'collage' part of the website.
HTML: Stripped it off of everything not part of the problem (except for the content).
The container is just a wrapper for the whole thing. My website will contain a bunch of images in the middle that link to the appropriate websites and, on hover over, display a short description and a title.
.collage is used to style the overall frame of the element
id will be used to add the background images (worked before!)
HTML-Part:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Startseite</title>
</head>
<html>
<body>
<div id="container">
<article>
<div class="collage" id="cg">
<a href="#">
<div class="text">
<h2>CG-Projekte</h2>
<p>
Computergerenderte Projekte, basierend auf der Open-Source-Software 'Blender', sowie Tutorials für einige der Projekte.
</p>
</div>
</a>
</div>
</article>
</div>
</body>
</html>
Use the first part for general purposes.
body: font-size so I can scale all em elements with one value (mobile)
#container: Placed in the middle, positioned accordingly, slightly darker than the overall background. Pretty basic
article .collage: Display as table to make the image hover-over work properly (which it does even now)
#cg: The part that isn't working. I can change the background-color with this tag, but not the image
.text parts: Those are the designs for the hover-over part, they work as far as I can see. I am using opacity to make it invisible, until it is hovered over.
CSS-Styling:
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background-color:#2B2B2B;
}
#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}
article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}
#cg{
background: url("cg_collage.jpg");
}
article div .text{
height: 400px;
width: 800px;
background: rgba(0,0,0,0.55);
position: relative;
top: 0;
left: 0;
vertical-align: middle;
display: table-cell;
opacity: 0;
transition: all ease-in 0.1s;
}
article .collage a{
text-decoration: none;
}
article .collage .text{
padding: 0 10px 0 10px;
}
article .collage .text h2{
text-align: right;
text-decoration: none;
color: #ADFF5C;
line-height: 70px;
font-size: 40px;
font-family: monospace;
border-bottom: 3px ridge #FFFFFF;
line-height: 50px;
}
article .collage .text p{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
color: #ADFF5C;
}
article div:hover .text{
opacity: 1;
}
Folders
As I said: I can change the background color fine, hover-over works perfectly. The only thing that won't work is the background-images. Images work fine if I embed them in the html-file.
I can't figure it out and a different viewpoint might find the 'Error 30' ;)
All of the other answers are correct, in the sense that your paths are not correct. The reason why this is happening is b/c your CSS file is in, I'm assuming, the "styles" folder, and when you reference your image, the path is assuming that the image is in the same folder as your CSS file.
Instead of using ".." to "back out" of a folder, it's always a best practice to use relative paths. Reason being, if you move files, folders, etc, then the path will always be correct.
Hence, instead of using background: url('../cg_collage.jpg'), you should use background: url('/cg_collage.jpg'). The "/" at the beginning tells the file(s) to look at the root and start from there. So rather than always counting how many folder structures you need to "drop back", use relative paths.
Also, a good practice is to always have your images in a folder, and name that folder appropriately (eg - "img" or "images" or w/e).
Helpful article on absolute and relative paths.
You have to change your CSS:
#cg{
background: url("cg_collage.jpg");
}
To:
#cg{
background: url("../cg_collage.jpg");
}
This is because your image is outside styles folder (where your stylesheet is).
I am not sure but CSS is looking for image file in its direcotry (styles). Try this one:
#cg{
background: url("../cg_collage.jpg");
}
You code works perfectly, when the file cg_collage.jpg is in folder /styles. Is it there in your project?
I have tried to code my page as follows:
<div class="Conttent-Group">
<div class="Conttent-Group-Body">
<div class="Conttent-Body-Right">
<div class="Conttent-Body-Left">
<h1>News operations</h1>
</div>
</div>
</div>
</div>
and although the following css:
* {
background-color: #006;
}
.Conttent-Group {
margin-top: 5px;
height: 300px;
width: 788px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: white;
}
.Conttent-Group-Body {
margin-left: 4px;
margin-top: 5px;
width: 386px;
height: 30px;
float: left;
background: url (Image / module-bg-bodynew.jpg) repeat-x top center;
}
.Conttent-Body-Right {
height: 30px;
background: url (image / module-bg-rightnew.jpg) top right no-repeat;
}
.Conttent-Body-Left {
background: url (image / module-bg-leftnew.jpg) top left no-repeat;
height: 30px;
}
.Conttent-Body-Left div {
background: #fff;
border:> 1px solid # C6B389;
border-top: none;
padding: 0;
margin-top: 7 pixels;
height: 243px;
}
.Conttent-Body-Left h1 {
display: block;
margin: 0;
padding: 20px 0 0 7 pixels;
text-align: left;
font-weight: bold;
color: # E1F1FE;
font-size: 13px;
}
But when running my code I only see the background-color
* { background-color: # 006; }
And not the background-images I have set. How can I fix this and show the images?
Currently you are using * {background-color: #006}. The * selector targets every element, thats on your side, thats why every background color is the same.
When you are using an image as background, first of all look up its file path:
/index.html
/style.css
/images/
/images/picture1.jpg
/images/picture2.jpg
If you want to target an picture, you always have to choose the file path regarding to your css file. So in this case for example your path is images/picture1.jpg. Although be aware of uppercase and lowercase letters inside your file structure (like Images or images) or not wanted spaces.
Using this you can set your background-image, and although add multiple variables, like:
background-image: url(images/picture1.jpg); /* no spaces inside your url */
background-repeat: no-repeat; /* or "repeat-x", "repeat-y" */
background-size: cover; /* for a fullscreen background */
background-color: #fff /* for everything your background images does not cover */
/* or combine them all into one */
background: url(images/picture1.jpg) no-repeat top center;
Furthermore you have got quite a lot of errors inside your code. Maybe you should consider refreshing the basics, using online helpers like codeacademy or something else you will find.
I have a layout for a website i am working on, basically i have about 10 pages but my footer will not stay in the same place. I have tried so many different variations of code and have been unsuccessful.
The footer should stay at the bottom of the page in the same place on every page.
I am fairly new to this so bear with me if there is any obvious mistakes.
I have created a JSFiddle with a page where the footer is at the bottom but it inst as far down as i need.
#footer {
width: 100%;
height: 20px;
text-align: center;
clear:both;
position:relative;
}
http://jsfiddle.net/mjbL7tcx/
I have created another JSFiddle with another page where it is no where at all where i want it.
http://jsfiddle.net/dej6b2df/
Any suggestions much appreciated.
I fixed your HTML code on both your example pages (too long to post as code chunk and unnecessary):
Page 1
Page 2
The solution is on the CSS side of things: don't float your photo elements, you should be good to go. I also optimized your css styles for your photo-divs since you can set a photo-div class to all your photo divs, style them as a group, and use their numeric class (ex: photo-div1) to set the background image:
.photo-div {
width: 241px;
height: 400px;
margin-left: 60px;
margin-top: 90px;
border: 2px solid #333;
box-shadow: 0px 7px 7px #999;
overflow: hidden;
display:inline-block;
}
.photo-div1 {
background-image: url(images/wildlife/cow.jpg);
}
.photo-div2 {
background-image: url(images/food/ice-cream.jpg);
}
.photo-div3 {
background-image: url(images/flowers/blue-bells.jpg);
}
.photo-div4 {
background-image: url(images/sport/cycling-zoom.jpg);
}
I'm trying to add multiple backgrounds this is my web page www.softglobal.com.mx, It has two headers, one with the logo and the other fills the right top, but I want a background that is behind this other two, how can I even do that, this is the CSS
enter code here
This the code
#content-wrap {
background: url (http://i.imgur.com/D4ZVVnY.png);
}
body {
background: url(http://i.imgur.com/K7yy7nB.png) no-repeat #fff;
width: 100%;
display: table;
margin: 0;
padding:0;
}
#templatemo_header {
height: 180px;
background: url(http://i.imgur.com/46t4Zmo.jpg) repeat-x;
background-position: 0 -2px;
margin: 2px 2px 2px 25px;
padding: -3px 0 0 0;
background: url (http://i.imgur.com/D4ZVVnY.png);
}
#ja-cssmenu {
margin:-49px -32px -20px 20px; /* all lists */
padding:0px;
}
##############################
you can using multiple backgrounds just be careful the order in which you use them, see this link for a good reference on how to added them:
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
but the issue here is that the image with the logo has a white background, this will not allow the texture image you have to be seeing, you'll have to change the logo image to a png so is transparent, delete all the white areas, otherwise they will block the texture underneath.