Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
It seems to work fine on other browsers and resolutions but not on 1920 x 1080. See image link below. The "about us" blue bar is wider than the image.
Image of the error
Issue found towards the bottom of the page on the about us image/link
Some help solving this would be greatly appreciated!
The image is not wide enough.
This should solve the problem.
.frontbutton.hpimg4::before {
background-size: cover;
}
Replace
.frontbutton.hpimg4::before {
width: -webkit-fill-available;
background-image: url(about-us.jpg);
}
with this
.frontbutton.hpimg4::before {
width: -webkit-fill-available;
background-image: url(about-us.jpg);
background-size: cover;
}
In your style.css
Its located in wp-content/themes/vantage-child/ folder
Hope this helps.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
Hello im an very beginner of html/css i made an navigation bar and an footer till yet. So i wanted an background image now but its bugged idk why. I tested a couple of random images but its for every image. Can someone help me pls? Code and Screenshot of the Problem below
I tried background-repeat: no-repeat;
But i am a very beginer so i dont know what to do. I just want an normal background. The details are already described
* {
background-image: url(ttt.png);
}
The above code means you put every element a background image.
If you just want body with the background image, use below code
body {
background-image: url(ttt.png);
}
You also should set something like background-size to make the size you want.
The doc
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
body {
background-image: url('./circle.svg');
}
straight up not working for me.
Are you sure the SVG is in the right directory? try placing it in the same directory as your style.css and adding background-size: cover;
If your SVG is in the same directory as your css this should work:
body {
background-image: url('circle.svg');
background-size: cover;
}
If your SVG is in the parent directory of your style .css make sure the url() has ../ infront of it.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have set the header image to not repeat. However, I'm trying to make the website responsive. When in a smaller browser the image begins to repeat.
screen snip of website header background
header css
media query
The property is no-repeat not none, e.g. :
.bg-image {
background-repeat: no-repeat;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm having problem with duplicating body area, wchich looks like this:
How to fix it?
You can change the background-size to fit the whole element by using background-size:cover .
body {
width:100%;
height: 600px;
background: linear-gradient(red, yellow);
background-size: cover;
}
this should fix it, the background will only show once
body {
background-repeat: no-repeat;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I cant seem to make the background in mobile to be fixed.
I tried the following:
.customBackground{
background-image:url('planwallpaper.com/static/images/3d-balls-hd-wallpaper.jpg') !important;
background-size:cover !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
}
Btw..i'm using a platform..called..dudaone.. its a multiscreen platform..what i want to know..is why the background-attachment:fixed !important; not working on mobile and tablets.
But it didn't help.
What am I missing?
Not exactly sure what's happening in your code, so here's a general solution:
If you've set a background on your element like:
body {
background:url('../images/img.jpg');
}
You can then use a media query to set background-attachment: fixed; on your element only on a specific screen resolution (i.e. mobile) like so:
#media only screen and (max-width:768px){
body{
background-attachment: fixed;
}
}
If you want to read more on media queries, you can check out MDN's page on it.
I hope this helps. If you could post your code it would make it easier for us to help, since we would be able to see exactly what's going on.