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
I have the next style for div:
.page {
width: 90%;
border-color: orange;
border-style: double;
border-width: 25px 30px 10px 20px;
border-image: url("images/border-image.png") 25 30 10 20 repeat;
margin: 70px auto 0px auto;
padding: 10px;
box-shadow: 0px 4px 3px rgba(0,0,0,0.9),
0px 8px 13px rgba(0,0,0,0.6),
0px 18px 23px rgba(0,0,0,0.1);;
}
I took it from example. And there is right all! But me it draws only frame of image and black background (body has black background). How can I draw middle part of images too?
Per https://drafts.csswg.org/css-backgrounds/#the-border-image-slice, the middle is automatically discarded (because it's a "border" image) unless you specify the fill keyword. So you want:
border-image: url("images/border-image.png") 25 30 10 20 fill repeat;
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 8 months ago.
Improve this question
Screenshot
Hello everyone,
I need your help to fix this interesting white space. Why does it look this?
You are seeing a sort of edge effect where the system is struggling to match part CSS pixels to the multiple screen pixels that make up one CSS pixel on modern displays.
If you put a background to the video the same coloring as the border it will 'fill up' the little gap.
background-color: rgba(255, 181, 147, 0.814);
Set the border-width to an even number, so instead of this:
#video_1 {
/* ... */
border-radius: 15px;
border-style: solid;
border-width: 5px;
/* ... */
}
Instead use something like 4px instead of 5px:
#video_1 {
/* ... */
border-radius: 15px;
border-style: solid;
/* like this */
border-width: 4px;
/* ... */
}
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 8 years ago.
Improve this question
I'm not sure if I should be using overflow or something else to fix this, but would appreciate any help I could get.
Scroll to the very bottom of the page. You will see at the very bottom where there's the black div and right below that is a little white space.
How can make that white space become black and still keep the rounded corners?
You have to set your padding-bottom to 0, and set the border radius bottom to the right and the left of the s-in-mid div.
Set bottom padding of .s-inn-mid to 0
Add bottom left and right border-radius 5px to the black div.
border-radius: 0 0 5px 5px
I'd tell you it exactly in terms of classes and ids, but you are using inline styles (GROSS), so that's unfortunately not possible.
Change this:
.s-inn-mid {
padding: 7px 0px 6px 0px;
...
to this:
.s-inn-mid {
padding: 7px 0px 0px 0px;
...
FYI, this has nothing to do with overflow. You simply had padding on the bottom of your container div.
in signup.css line 293 change #fff to #000, as below, tested in chrome.
.s-inn-mid {
width: 1000px;
margin: 0;
padding: 7px 0px 6px 0px;
float: left;
background: none repeat scroll 0 0 #000;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Hi can someone teach me how to remove the white borders around an image posted on a Blogger blog?
This is the blog link: www.ulimali.blogspot.com
Sorry, I'm new to stackoverflow/html/css, I would really appreciate it if someone can help me with this. Thank you!
I assume that you want to remove the border as well as the shadow behind. For that use this CSS:
img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
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
I'm using this Sass to style a header on some static pages, but the background image doesn't show up. I'm pretty sure I've got the relative file path right (the stylesheet is in a stylesheets folder and the image is an images folder, both in an assets folder). What else might be causing this?
.blue_section_header
width: 900px
height: 80px
font-size: 30px
font-weight: 700
padding: 25px 0 0 40px
color: #fff
background: #54a0ce url(../images/section_header.png)
-webkit-border-radius: 4px
-moz-border-radius: 4px
border-radius: 4px
In Chrome:
1) Open Developer Tools
2) Click the Resources tab at the top
3) Open the Frames folder
4) Look for the Images folder and open it
Do you see your image in the Images folder? If you don't see the image that means that your relative path is incorrect.
You are missing a few things.
You miss the opening and closing brackets ({, }).
And the semi-colon behind every line.
It should be :
.blue_section_header {
width: 900px;
height: 80px;
font-size: 30px;
font-weight: 700;
padding: 25px 0 0 40px;
color: #fff;
background: #54a0ce url(../images/section_header.png);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am trying to create a website background similar to http://www.latlong.net/ but i'm not having any luck. Is this green and gray background one image or is that a green image at the top with a gray background?
I cannot find the css for the background to see what they have, it comes out all jumbled with alot of extra google maps css on it.
Can anyone see what they are doing to do the strip across the top and gray below?
Thanks!
Extracted from inspecting element with Chrome; You need:
body{
background-color: rgb(235, 237, 231); /* This is #EBEDE7*/
}
header{
background-color: rgb(215, 230, 184); /* this is #D7E6B8*/
}
Working fiddle: http://jsfiddle.net/shahverdy/NByX9/
How to find this?
Generally if you want to find out that how Html/Css of a webpage is working, the best way is to use some tools like Chrome Developer Tools instead of reading the Html/Css Files from source. There are some other tool in other browsers too.
In Chrome you need to right click on any element of the page and select inspect element.
You can find this out by using Chrome developer tools and inspecting the element:
https://developers.google.com/chrome-developer-tools/
Looks like they are styling the header element using a background color and bottom border and shadow.
header {
margin-bottom:10px;
background-color: #D7E6B8;
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
It is not an image but the background-color css attribute. You can do something like:
<header>My header</header>
with the CSS:
header { background-color: #D7E6B8 }
The body of your page can have css for the gray background:
body { background-color: #EBEDE7 }
There is no background image in that, all are css background colors and shadows.just try with the following,
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I think what you're referring to is the shadow. It's not gray, but black with a high transparency.
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
This is on <header>, which also has a solid green background-color (actually #D7E6B8).
Following classes are used in given page:
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}