So i have this DIV with a background
this is the style:
#book{
width: 800px;
position: absolute;
right:0;
top: 0px;
font-family: love;
font-size: 20px;
background:url("../img/boek.png");
}
The problem that I have is that there is space between those two backgrounds, and I really don't know why because I've never else used something like margin-top or paddin-top etc...
I just want the two backgrounds to touch eachother
This is an incomplete question or its incoherent.. But add repeat after backround.to make it repeat the full length of a div.. If thats what youre asking.
Background: url() repeat;
probably html, body {
margin: 0;
}
Related
This question already has answers here:
Can you apply a width to a :before/:after pseudo-element (content:url(image))?
(3 answers)
Closed 5 years ago.
I've started learning HTML/CSS but ran into a problem that has been discussed sometimes around here, but the solutions don't seem to fix my problem, so I'm wondering what I am doing wrong.
I want to use content: url() in CSS, specially because I want some images to change on :hover.
After searching for this problem, the solution mentioned here and on other threads (include :before), makes the image appear, but completely ignores the height/width set, effectively showing the image, but with its original size.
Have also tried changing it to "background-image: url ()" but the problem remains. Why aren't the height/width being accepted? I'm clueless here.
<div id="logo"></div>
CSS:
#logo {
content: url(images/asspreto.png);
height: 90px;
width: 168px; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
float: right;
vertical-align: middle;
}
#logo:hover {
content:url(images/assazul.png);
cursor: pointer;
}
If you want an image to fit in the available space, you need to indicate so. You can do this using the background-size directive. To make it so that the image fits in the available space, but keeps its aspect ratio, use contain.
Here is an example. You can see how the image is scaled and does not fill the entire element.
#logo {
width: 400px;
height: 300px;
background-image: url('https://placehold.it/500?text=500x500, but scaled');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #000;
}
<div id="logo"></div>
Here is my interpretation: you can't change the dimensions of the media supplied to the render via content: url(). It's not mentioned in the specs though, but you can see that setting dimensions simply won't work when placing media with the help of pseudo elements.
I myself experimented a bit on this and this is what I come up with: http://codepen.io/rahul_arora/pen/GWvNgJ
You simple can't resize the media inserted using pseudo elements with height, width, object-fit, etc. It will take its space and only the overflow can help you to hide its overflowing.
If you really want to get this done with the help of pseudo elements only, an alternative way to do that is by using the image as a background.
.logo {
position: relative;
height: 90px;
width: 168px;
}
.logo:after {
position: absolute;
top: 0;
left: 0;
content: "";
background: url(https://unsplash.it/g/200/200?image=1062) 0 0 no-repeat / cover;
height: 100%;
width: 100%;
}
.logo:hover:after {
background-image: url(https://unsplash.it/200/200?image=1062);
}
<div class="logo"></div>
I hope that solved it for you. Cheers!
#logo:before {
background: url("https://www.gravatar.com/avatar/732637806aee1bf98e7ef1f3658db84a?s=328&d=identicon&r=PG&f=1")no-repeat;
height: 200px;
width: 100%; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
float: right;
vertical-align: middle;
content:"";
height:300px;
width:300px;
position:absolute;
top:0;
left:0;
}
#logo{position:relative;}
<div id="logo"></div>
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
I apologize if this is a trivial question but I can't seem to figure it out. I have this website and I need the navigation bar on the side, and the rectangle all the way on the right (The one with the "ContentExtender" class) to stretch down to the bottom of the physical page (well, the ContentExtender only needs to stretch as far as the content so it blends, but that's another story). What is the simplest way to do this? I looked it up and found setting the Body's height to 100% should work, but it didn't. I know that's a lot of code to look through, so here is the actual important parts of the code (anything prefixed with "cc" was just an easy way of commenting them out):
.ContentExtender {
background-image: url(bgblack.png);
min-height: 10px;
ccmin-width: 200px;
ccwidth:100%;
margin: 0px 0px 0px 1010px;
position: absolute;
top: 110px;
right: 0px;
left: 0px;
}
.MainParent {
position: absolute;
left:0px;
top:0px;
right:0px;
bottom: 0px;
background-color:rgba(70,70,70,.7);
min-height: 600px;
min-width: 1000px;
max-width: 1000px;
height: 100%;
margin: 0px 10px 0px 10px;
z-index:100;
overflow: hidden;
}
You need to give html, body { height: 100%; } plus make any other parents of the element you want to have height: 100%;, height: 100%;
I recently had a problem where I could not extend to the top of the window, which may be similar. I set:
body {
margin: 0px;
}
In your case, it may be another element. I have seen where all possible elements are intentionally set to a 0 margin, and then the margins desired are re-implemented.
seems like there's a small error in your code try editing your
.ContentExtender
and change it to
#ContentExtender
Then you will be able to fix it, if this method doesn't work try setting the background CSS on the HTML tag of the Content extender like below
html{
height:100%;
background:#ccc url(bgblack.png);
}
the above is an example, so please improvise
Your issue is linked to the fact that a child div cannot directly dictate the behaviour of a parent.
Try one of these on your parent div:
overflow: auto;
display: table;
Or in the child div:
display: table-row;
When you try it, experiment with omitting the "height: blabla" attribute.
Similar problem solved: [1]: CSS - Expand float child DIV height to parent's height
I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.
Supposing I'm setting a background image for a web page in CSS like this:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url(images/desk.gif) repeat bottom left;
}
Is there any way to layer a second image on top of the desk.gif within the body element itself, or is the only way to create a separate class and use the z axis?
Sorry, it's a simpleminded question, but I've been trying to figure this out and though I haven't been able to make it work, I also haven't found a clear slapdown of the idea anywhere online... so, is there a way, or is this just a no can do?
Thanks!
Layered backgrounds are part of the CSS3 Working Draft but, as far as I know, support for them is limited to WebKit/KHTML-based browsers such as Safari, Chrome, Konqueror and OmniWeb.
Using your example code, this would look like:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url("images/top.gif") left bottom repeat,
url("images/desk.gif") left bottom repeat;
}
I've already posted the solution in a duplicate question, but for anyone that may require this information I'll post it here as well.
As far as I am aware it is not possible to put it in the same layer, but it is possible to put several images in separate div's on top of one another, and has been implemented by popular usability testing website Silverback (check the background to see how it has been layered). If you look through the source code you can see that the background is made up of several images, placed on top of one another.
Here is the article demonstrating how to do the effect can be found on Vitamin. A similar concept for wrapping these 'onion skin' layers can be found on A List Apart.
In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.
Hope this helps!
Nowadays this can be done in all the "modern" browsers (not < IE9, afaik). I can confirm that it works in Firefox, Opera, Chrome. There is no reason not to do it, as long as you have a decent fallback solution for older browsers / IE.
For the syntax you can choose between
background:url(..) repeat-x left top,
url(..) repeat-x left bottom;
and
background-image:url(..), url(..);
background-position:left top, left bottom;
background-repeat:repeat-x;
You don't need the linebreaks, but the comma is important.
Attention! The following will create two backgrounds, even though you specified only one image url:
background-image:url(..);
background-position:top, bottom;
And of course, there is the alternative to use nested containers, but this will bloat your html.
Ancient question here but the answer for this is the :after pseudo-element.
SCSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
&:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
}
CSS
body {
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/200) repeat bottom left;
}
body:after {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: url(https://via.placeholder.com/100) repeat bottom left;
opacity: 0.5;
}
The only way is to use another container. Each element may contain only one background image.
Use absolute positioning and a z-index to get the second element on top.
link text
Above mentioned link best describes what you r upto...
Don't forget you can apply styles to the HTML element:
html {
background: url(images/whatever.gif);
}