I have a PHPBB theme I am starting to construct. In the CSS file, I have three items--a body and two divs--with background images. The background images for the divs have ceased working in all browsers.
The site with the theme presented is here: https://www.tarazedi.com/index.php?style=7
The problem images are here: https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png
The CSS is located in wTcFresh/theme/.
The images are all in the same locations but there seems to be a pathing issue but is working very strangely. I have tried using both relative and absolute URLs. I have tried url(x);, url('x');, and url("x"); and also changing the other background elements. In no case have the banner and logo images started working, but the body image works fine despite being in the same place and using the same syntax. When I inspect the computed styles of the divs in Chrome the image will show as the full absolute URL correctly but the relative link links instead to tarazedi.com/images/site_banner.png which returns a 500 error because that URL is, obviously, useless. In Edge and Firefox the inspector shows the correct link to the image but still does not render.
I have cleared browser and site-side caches with each attempt I make to fix it.
I am baffled. What am I missing?
body {
color: #CCCCCC;
background-color: #000000;
background-image: url("images/bg.jpg");
background-attachment: fixed;
}
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("images/site_logo.png");
background-attachment: fixed;
background-position: left center;
vertical-align: middle;
}
To achieve expected result,adjust background-position and it is not issue with the background-image
1.Remove background:position to see the difference
Editing it thusly fixed the problem and it now renders correctly. Thank you very much!
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
background-image: url("images/site_logo.png");
overflow: hidden;
background-repeat: no-repeat;
background-position: left;
align-items: center;
}
Related
https://jsfiddle.net/r7d5fLe4/
<span class="emote" style="background-image: url(https://static-cdn.jtvnw.net/emoticons/v2/90076/default/dark/1.0);">
I have some same spans with background-image.
Why the images become a little bigger except the last one in a line?
I suggest doing this on your body with CSS only. Putting it on a span could be problematic. Unless you want it to only be the background of an independent section, then I would use a div instead of span. (See example two). See the CSS changes in example one.
example one
body {
background-image: url('https://static-cdn.jtvnw.net/emoticons/v2/90076/default/dark/1.0');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0.4em 0.2em;
position: relative;
box-sizing: border-box;
}
example two
div {
width: 100px;
height: 100px;
background-image: url('https://static-cdn.jtvnw.net/emoticons/v2/90076/default/dark/1.0');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0.4em 0.2em;
position: relative;
box-sizing: border-box;
}
<div></div>
All in all, I suggest a higher-res (larger) image for a background.
I have been struggling for the past several weeks with the parallax effect in a section on the profile page I am building.
In this section, I have three 4-column divs. The 1st div contains my text, the 2nd div contains one large background image, and the 3rd div contains two smaller background images.
I added background-attachment: fixed; to three images, and while it works fine with the large image in the 2nd div, the other two images get stretched beyond recognition. Here is the CSS styling that I have right now: https://codepen.io/snailssnooze123/full/BmPxgN/
#about-bg-selfie {
background-image: url("https://www.dropbox.com/s/aqf4nj496qeg0db/alleyPic.JPG?raw=1");
height: 500px;
width: 300px;
background-repeat: no-repeat;
background-position: center;
background-size: 35%;
background-attachment: fixed;
border-top: 500px solid transparent;
border-left: 90px solid #fff;
margin-left: 60px;
padding-right: 250px;
}
#about-bg-pyramids {
background-image: url("https://www.dropbox.com/s/savr06trk2onj2c/pyramids.jpg?raw=1");
min-height: 250px;
width: 350px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#about-bg-temple {
background-image: url("https://www.dropbox.com/s/twatj0fumugvrbg/temple.jpg?raw=1");
height: 240px;
width: 350px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 10px;
}
Here is what I would like the picture on the right to look like, only with the Parallax effect:https://codepen.io/snailssnooze123/full/LOBmgB/.
I have been playing with the code for days and can't get it to work. Could anyone help me figure this out? I'm afraid I must be missing something really obvious here :)
I found what is the problem.
you have to remove this from "#about-bg-pyramids" and "#about-bg-temple" css :
background-attachment: fixed;
I am having trouble getting a background image to show in a div and can't for the life of me see why...
This is the structure that I have:
Folder
\style.css
\index.html
\Images
\bookone.jpg
I want the bookone.jpg file to be the background of a div.
So the CSS path would be Folder/style.css and the image path is Folder/Images/bookone.jpg. I have the below code in my html and css file but I get nothing when previewing it.
/* CSS */
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(..\Images\bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<!-- HTML -->
<div id="bookone" class="book"></div>
You should use slash (/) and not backslash (\).
You should make sure the image is in the correct path (relatively to the current css/html file).
If the images exists in the same location of your css file (or your html file) you shouldn't use the .., since it actually tells your browser to search for that image in the upper-folder.
This is the final css code you should probably use:
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(Images/bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
just writing my comment as answer as this help OP to solved the problem
try url(Images/bookone.jpg) in ur css file
It appears like the image you want have as a background is in another folder away from where the CSS is. I suggest you assign the background image from the HTML code. Use the forward slash (/) and not backslash (\).
E.G
<div id="bookone" class="book" style="background: (url('/myimage/bg.jpg')"></div>
or on css
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(./images/bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
Before posting it over here, I have done thorough research work on my question but I haven't found any suitable answer to it.
How do I post an background image in a textbox using CSS?
Am using IE11.
The below is the code which am using
<a href="#">
<div id="imagecontainer"></div>
<style>
#imagecontainer {
background-image: url("content\A.png") no-repeat;
background-size: cover;
background-size: contain;
width: 10%;
height: 10%;
border: 1px solid;
}
I have tried many possibilities to sort it out but am unable to. The box is going to be displayed but not the image in the backgorund in my code.
Can any of you suggest me whats wrong in it please.
if you are trying to reference a url in a different directory use the following:
#imagecontainer {
background-image: url('Images/example.jpg') no-repeat;
background-size: cover;
background-size: contain;
width: 10%;
height: 10%;
border: 1px solid;
}
Try like this: Demo
input {
padding: 9px;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 10%;
height: 10%;
border: 1px solid;
background: #FFFFFF url('http://nettuts.s3.amazonaws.com/584_form/bg_form.png') left top repeat-x; /* make sure about the image path you mentioned is right */
}
And I didn't saw any textbox code in you HTML. As you mentioned, I showed simple example for textbox with background image. Hope this is what you want.