I am trying to set a background image for my wordpress website.
.content:before {
content: "";
background-image: url("gfx/SevenWonders.jpg");
/*background: #fff;*/
background-size:600px 700px;
background-repeat: no-repeat;
position: absolute;
z-index: -9999;
top: 0;
right: 28.5%;
bottom: 0;
left: -10000px;
}
this is my css code with background-image. I resized the size because the image
is pretty large for my website. AND! after adding background-repeat: no-repeat,
the background is not displayable. I see only white background.
Of course, I googled to find the solutions, but almost all of them are saying
about syntax error, but I cannot find any syntax mistakes in my code ..
check this fiddle. Problem is with your left property value in css.
.content:before {
content: "";
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
/*background: #fff;*/
background-size:600px 700px;
background-repeat: no-repeat;
position: absolute;
z-index: -9999;
top: 0;
right: 28.5%;
bottom: 0;
left: 0px;
}
Related
I have a css styling problem:
I created a header with text inside. The header has two pseudo elements: ::before and ::after.
Both elements lay on top of the header element. How do I get the h1 to stay in front of everything??
Here is my code example: (got code snippets removed?? i didnt found the button where to add)
header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
background-image: url("Bild1.svg");
background-size: 100% 100%;
text-align: center;
padding: 1px 20px;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("Bild2.svg");
background-size: 100% 100%;
opacity: .5;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -10px;
background-image: url("Bild3.svg");
background-size: 100% 100%;
opacity: .5;
}
<header>
<h1>Title Text</h1>
</header>
Here is a image how it looks:
As you can see the Text is behind both elements.
I tried to fix it using z-index but nothing worked for me. U have and ideas?
apply z-index 99 on background
and apply z-index 999 on the text I hope it will work
I would suggest making the z-index of the h1 tag
h1{
z-index: 999;
color: white;
}
and making the background z-index to 99 or something below that.
On some devices screens (laptop), I noticed on Chrome and Microsoft Edge browsers, there is line above my backgroungd svg image, on my top menu.
It looks fine if i resize the window, for example it looks good on mobile size screen. If i change the backround height seems to be solved but it will occur on other screen sizes.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-position-y: 2px;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I add a printscreen of the error here
On firefox, it seems to be fine.
I wonder if the top line is not a part of the svg image. Unfortunatelly I am not a svg expert.
Thank you for help.
Try removing background-position-y from your css. So that the new CSS looks like this.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
Im writing a tank-game in dart. It's 27 * 27 table. For every single field I use background-image attribute. For example my tank consits of 4 small fields. Tank takes only 1 small field on raster. But through pseudo-class .bg-player-left:before if achieved, that tank looks like it 4 field-tank. Same idea with bullets. It takes only one field on raster, but looks like 2. The problem is, that top-left position of this objects is always black.
.bg-water {
background-image: url("../img/water-field.png");
background-size: cover;
background-repeat: no-repeat;
}
.bg-bush {
background-image: url("../img/bush-field.png");
background-size: cover;
background-repeat: no-repeat;
opacity: 0.8;
}
.bg-bullet-up, .bg-bullet-down, .bg-bullet-left, .bg-bullet-right,
.bg-player-up, .bg-player-down, .bg-player-left, .bg-player-right {
position: relative;
}
.bg-player-up:before {
content: "";
position: absolute;
top: 0;
left: 0px;
right: -15px;
bottom: -15px;
background-image: url("../img/player-tank-left.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
.bg-bullet-up:before {
content: "";
position: absolute;
top: 0;
left: 0px;
right: -15px;
bottom: -15px;
background-image: url("../img/bullet-left.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
You can also try by yourself (https://javajunikorn.github.io/BattleCity/build/web/html/test.html)
In order to move tank you need to start the game from mobile or in browser inspector for mobile version.
interesting idea to morph the object with pseudoclass.
Could it be that you have a css color background set to black, which on that png for bullet and tank creates this distortion?
If I go here: https://javajunikorn.github.io/BattleCity/build/web/img/bullet-left.png
I can see this attribute in css:
background: #0e0e0e;
I have a div with a background color and a background image. The div calls this class:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
I am trying to make only the image somewhat transparent. I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png);
opacity: 0.6;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the entire div transparent.
So I tried this:
.cakebg {
background-color: #F8BBD0;
background-image: url(img/cake.png) opacity(0.6);
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
But that makes the image disappear entirely. Can this be done?
What you're trying to do on that single element isn't possible, but there's plenty of ways that could do the same thing with very little extra effort. Probably the best way would be to either add an additional child element to the .cakebg element with the same dimensions that only has the background image, with opacity. Such as:
.cakebg .child-element {
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If you're trying to keep your markup clean, you can even add this as a pseudoelement. Such as the following:
.cakebg:after {
content: "";
height: 100%;
width: 100%;
background-image: url(img/cake.png);
opacity: 0.6;
}
If neither of those methods work, a last resort could be editing the image to have that opacity baked in from your favorite editing software. Hopefully some of these methods might help!
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
position: relative;
}
.cakebg::after {
content: "";
background: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
OR you can simply use an trasparent png image as background
There is no CSS property to make just the background transparent, but you can fake it by inserting a pseudo element with the same size of element behind it and change the opacity of this.
.cakebg {
background-color: #F8BBD0;
background-size: 25%;
background-position: right top;
background-repeat: no-repeat;
}
.cakebg::after {
content: "";
background-image: url(img/cake.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Please note that that question was already asked quite often, read here for example.