I'm trying to make simple website with content background combined from 3 images: top bar, content background and bottom bar.
The problem is that content background appears under top and bottom bar, where should be transparency:
After and before adding BG CSS:
background-image: url('content-top.png'), url('content-bottom.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;
.
background-image: url('content-top.png'), url('content-bottom.png'), url('content-body.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: left top, left bottom, left center;
How can I solve this?
edit:
I've created same effect with CSS3, solving the problem:
background-color: #d9daca;
-webkit-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 1);
border: 1px #8a8977 solid;
The easiest way to do it if you're using images is you create a div for each image within a container and either control the background via css properties or just drop the image into the div. The problem you have is that the top image is overlapping the background picture because its one div. Split it and it'll sort the issue, for example:
<div id="wrapper">
<div id="top"></div>
<div id="middle">
<!-- Content in here -->
</div>
<div id="bottom"></div>
</div>
That way all the divs are held within a wrapper. You may need to apply float: left !important; to some of the divs if you are having trouble getting them to line up properly. But this is what i do, and it works perfectly :)
Andy
Related
A CSS Layout Problem
Currently I'm not happy with my standard <hr> dotted lines. The results are far from the holy grail dotted lines I was looking for.
hr{
border-bottom: 1px dotted Black;
border-top: none;
margin: 1em 0;
}
Please open image at 100% scaling in a separate window.
The dots are too close to each other and I don't want dashed lines with black stripes. I want dots but with more spacing in between them.
Desire for (and Design of) the Pure Elusive Holy Grail Dotted Line
In my dreams I see in front of me a pure CSS dotted line, like in this image (made in Photoshop).
Please open image at 100% scaling in a separate window.
A horizontal rule that meets the following criteria:
A height of 1px
A repeating pattern of 2 pixels transparent gap followed by a 1 Black pixel
Has a 100% width (give or take 3 pixels)
From the first dot till the last dot, at no point are there dots pushed together (black dots too close together) or pulled apart (more than 2 pixels gap spacing in between Black dots)
A pure CSS layout using CSS Background Radial-Gradient
Where I'm stuck now
I cannot get this to work properly yet. What have I overlooked and why is the following not working?
hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}
Until the solution, the search for the elusive holy grail hr remains untackled.
html{ margin: 7em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
border-bottom: 1px dotted Black;
border-top: none;
margin: 1em 0;
}
hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}
<article>
<p> Text </p>
<hr>
<p> Text </p>
</article>
The following code works. Although I have no idea why and how precisely. Other more elegant answers, improvements and suggestions are welcome that can further explain the workings of the magic here.
After many trials I have figured out that the first number represents the gap size and the second number represents the dot width in background-size: 3px 1px;
hr{
border: none;
background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 3px 1px; // GAP width and DOT width
height: 1px;
}
html{ margin: 4em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
border: none;
background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 3px 1px; /* First Nr is the GAP width, second Nr is the DOT width */
height: 1px;
}
<article>
<p>Text</p>
<hr>
<p>Text</p>
</article>
Hello all i want to make custom top border with css but intersection lines are not straight as seen below :
And this is my css rules :
border-radius: 4px;
background-image: linear-gradient(to left, transparent 115px, #b0b0b0 -10px);
border-right: 1px solid #b0b0b0;
border-bottom: 1px solid #b0b0b0;
border-left: 1px solid #b0b0b0;
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
The design I intend to make the question more understandable is in the picture below.
I tried some ::after , ::before solutions for that but i got same issue how can i fix this ? Thanks for answers
Your solution adds border-radius to all all corners top-left, top-right, bottom-left, bottom-right.
Instead of setting
border-radius: 4px;
simply go with specific corners for example:
border-bottom-left-radius: 50px;
would setup only bottom-left radius like here:
and reduce unwanted effect in your UI.
You can remove the border-radius on the bottom corners with the following.
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
I have used in my code:
<span style="border-right-style: dashed; border-right-width:thin;">
Also, see attached image
I just want the line like as right side in the image (3 dashes).
This can be done by using the background image as follows.
div {
padding: 10px 50px;
}
.dashes {
background-image: linear-gradient(to bottom, #333 80%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 1px 14px;
background-repeat: repeat-y;
}
<div class='dashes'>My text</div>
Or you can also use some small icon/thumbnail image of the 3 dashes to put it between your text.
You can use the SVG or small image of dased as icon images. These will help to put more designs of dashes.
I have wordpress site with a container at the very top to display a background image. I want the background to stay proportional with the div height to adjust according to screen size. I am currently using the height tag to get this area to show (See CSS below). I basically want it to not overflow when the site is big (it hides the bottom of the image when at higher resolutions) and not show white at the bottom when the site is small.
How can I make the height responsive?
You can see the site here: http://69.195.124.65/~flywitha/
CSS:
.top_site{
background: rgba(0, 0, 0, 0) url("/wp-content/themes/alex/images/mast_w-kid_1920x800.jpg") no-repeat scroll right bottom;
background-size: contain;
}
.top_site h1{
font-family:lato, sans-serif;
color:rgba(40, 40, 40, 0.8);
padding: 15% 0 9.255% 15%;
margin:0;
width:50%;
font-size:6rem;
font-weight:bold;
-webkit-text-stroke: 1px black;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
HTML:
<div class="top_site">
<h1 class="site-hdr-tag inset-text">
the<br>
INTERACTIVE<br>
AEROSPACE<br>
LEARNING<br>
CAMPUS
</h1>
</div>
You're probably looking for
background-size: cover
or
background-size: contain
simplest solution is to specify the height (and/or width) of the container as a percentage of the Viewport's height (and/or width):
DIV { height: 25vh; width: 50vw; }
.myclass { height: 25vh; width: 50vw; }
both meaning, size the 'container' at 25% of the Viewports height and 50% of it's width.
Cheers
I have a large png file that I am using as background image file for my various elements using css. I can use that image when I know the width and height of the element, like
<div id="play-btn"></div>
.play-btn{
background: url(../images/bigImage.png) no-repeat 203px 415px;
width: 100px;
height: 50px;
}
how to use that bigImage as background when I dont want to provide width/height of the elemtn, like
<div id="star-icon">star on left</div>
.star-icon{
background: /*How I will use bigImage here on where star is at location 50,50*/,
padding: 5px 0 5px 60px;
}
You have to use negative left and top, it moves the bgImage in that direction so it displays starting at 50px.
background: url(../images/bigImage.png) no-repeat -50px -50px;