CSS Background image problems [closed] - html

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi been trying to get this for quite some time. Ive done it before which is why i feel pretty pathetic for having to ask. The background will not show up.
Im trying to set a background image for my footer and the top menu on my website located HERE
This is my CSS for the Footer:
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-image: url('./classy_fabric/classy_fabic.png');
border-top: 1px solid #e5e5e5;
}
And here is the CSS for the top nav:
.blog-masthead {
background-image: url('./classy_fabric/classy_fabic.png');
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

You have fabric mispelled so it can't find it.
http://sadin.me/css/classy_fabric/classy_fabric.png

I found one glitch in you code.
background-image: url('./classy_fabric/classy_fabic.png'); one (.) is missing
background-image: url('../classy_fabric/classy_fabic.png');

I think you just need to move your file into the right directory.
Request URL:http://sadin.me/css/classy_fabric/classy_fabic.png
Request Method:GET
Status Code:404 Not Found
If you're using Chrome, check out the network tab of your debug console for any 404 errors.

Related

css: invalid property value [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I've got a problem and I don't know how to solve it. The line that has this invalid property value is between the 4 asterisks (or *). If you need anything else like the HTML please let me know. Everything works fine besides that.
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
**background-image: linear-gradient(rgb(0,0,100,0.26)), url(bckg.png);**
padding: 55px;
box-sizing: border-box;
}
Here is an image with the error on the website
rgb(0,0,100,0.26) is not a valid rgb value. Should be rgba(0,0,100,0.26)

border-radius not working consistently in similar divs in chrome [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
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.
Improve this question
The website I'm working on has a div on the right showing code examples in the hero section of the homepage. We use a similar div on one of our landing pages (https://buttercms.com/l/ruby-blog-software/) but the bottom of the div doesnt have rounded borders.
I can't figure out why the landing page div doesnt have rounded borders but the homepage div does.
It only did it at certain breakpoints and only on one of my monitors.
The <pre> only showed up on the same breakpoints the border was wrong
The solution that worked for me was
body.landing_page .code-examples .code-container .code pre {
margin: 0;
border: none;
border-radius: 5px;
text-align: left;
min-height: 320px;
}
The original border radius was 0px

how to make css outline compatible in all browser?Vendor prefix aren't working [This is improper post please ignore it] [closed]

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 7 years ago.
Improve this question
He guys I'm using css outline on my menu list item(li).In my chrome it works fine but in Mozilla firefox outline produce really bad result.I have used vendor prefix like :-
-moz-outline:2px solid white;
-webkit-outline:2px solid white;
but my mozilla shows me problem on outline :( how can i make outline property compatible for all browser?
Just use outline: 2px solid white. No need for vendor prefixes on a CSS2 feature.
Try this
.className{
outline: 2px solid white;
-moz-outline:2px solid white;
-webkit-outline:2px solid white;
}

Circle with dotted or dashed border [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
With this CSS styles I expect a circle with dotted border:
div{
border: 1px dotted #000;
padding: 50px;
border-radius: 100px;
display: inline-block;
}
But Firefox is rendering solid borders (fiddle here). Any solution?
UPDATE
THIS IS NOT AN ISSUE ANY MORE.
RESOLVED in Firefox 50
If you're using Firefox, this is a known bug. Your options are:
If this is just for the sake of a circle, draw it with <canvas>, e.g. as demonstrated here
Use SVG (possibly inline), which supports various ways to stroke paths
Just make a PNG
Fix the bug, which Mozilla will surely appreciate ;)

Figure 7px taller than it should be [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone tell me why my rollovers for my figures are 7px taller than the figures themselves?
Been looking at this for nearly 2 hours and it's driving me towards insanity.
Note: This site is nowhere near finished so there is probably lots still wrong with it but if someone could tell me where the 7px is coming from that would be great.
I can post code if needed but here is a link to the test page.
Link to the text site
Thanks.
The extra space is actually a cause of line-height. Since you are using display: inline-block; on .portfolioWork figure, line-height will have an affect on it.
Just add line-height: 0; to .portfolioWork figure and it will fix the issue.
Your CSS definition will look like this:
.portfolioWork figure {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
}