I am using WordPress and I want to make the header and the div below it to share the same background image.
I have added the div in the WordPress page using Visual Composer and given it a background image, but the only way I can make it go into the background of the nav is by giving it a negative margin-top value, which of course makes it non responsive. Could anyone give me any pointers?
Since you dont have any code, i cant really SEE what you want to do but, i assume what you need to do is something like this
<div id="mainTOPwrapper">
<div id="header">header content here</div>
<div id= "divBelowIt"> lolz at the div name =) </div>
</div>
And then, you give the background image css to "mainTOPwrapper". Make sure the divs within it dont have any backgrounds, and this will work for you
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I have a fullscreen Bootstrap container that's sitting in front of a color overlay I added. But it seems that the container blocks the overlay even though it is mostly empty, why is that so? I need it behind my container as the img inside the container needs to be on top of the color. The html's body's color is coming through, though. But I need both the html's body color and also the overlay to be seperate as I'm slowly fading the overlay out to show the body color... Wondering if it sounds confusing. =x Thanks in advance!
<div class="container-fluid">
<div class="row row-xs-center">
<div class="col-xs-12 text-xs-center">
<img src="../img/cover_coral.png" id="myCover">
</div>
</div>
</div>
<div id="myOverlay"></div>
Using Bootstrap's container-fluid class will cause your div tag to span the width of the page (with a bit of padding applied). If you have an overlay you want to show in front of it, your best option is to use CSS to add a z-index of say 2000 (any large number will do). When you fade out, simply animate the opacity of the overlay and/or change the z-index so it's behind the container.
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I've been racking my brains for quite a bit of time but still was not find to find a variant but one I will describe here.
I’m using twitter bootstrap 2.3.2. I wanted to change the background of the "container". When I applied the changes, this image was also the background of "navbar" and "hero-unit".
The same thing you can discover here:
http://getbootstrap.com/2.3.2/examples/hero.html
By setting in the "Inspect Element" of the "container" settings smth like this:
background-image: ('url');
It will not only set the image of the body, but also of the "navbar".
Surely, I clearly understand why, in my case, the background of "navbar" and "hero-unit" are changing, because I got this in the HTML:
<div class="container">
<div class="navbar">
<div class="hero-unit">
</div>
</div>
</div>
But what I need, is that the "hero-unit" and the main content "container" were on one line (as on the link provided above). If they are applied to the "container" class it works, but the background is fairly. What properties do I have to apply to the new class, so as they are of equal size (see the link). I think I'm stuck a bit and badly need some support.
I guess I gotta create two new classes? One for the equal display of the "container" and "hero-unit" and "navbar" and the other (with same property of width) to set the background. But I cant figure it out:(
There's an easy fix for your issue.
Use proper markup. It makes no sense to put a hero-unit inside of a navbar and after that put said navbar inside of your container.
<div class="navbar">
<!-- Other stuff -->
</div>
<div class="container">
<div class="hero-unit"></div>
</div>
This is the markup you should use. Then you can create a separate class with your CSS properties and add that class to your DIV with the container class.