I am working as an internship for a company and the owner has asked if it would be possible to fade the random images that appear to the right of the website down to near the bottom of the page (that was bland, will go into detail below).
So far, I have set up a test site and here is a page example.
The site uses Joomla CMS (not my choice). If you look at the right there is an image of a musician, each refresh pulls up a different musician/image. What my boss wanted me to do (since apparently I'm low on tasks since revamping their site) is to make a fade gradient that starts at black under the image that uses the rest of the pages height to slowly transition to the background color or transparent (I assume the background color would be easier). So far my thoughts are that this is pretty impossible but I thought I would ask you guys anyways.
My main issue is the height right column of the page to dynamically match with the height of the page height... if that is possible. I know how to make it gradient, but the height issue is bugging me!
The CSS for the whole right column (without gradient, obviously) is:
#columnrt {
width:200px;
background-color:#673601;
float:right; }
If inspecting the source code on the page, the random image shows up in a class called "random-image" in which I have a strong feeling it's generated by Joomla... example so you can identify the what image are I am talking about:
<div class="random-image"><img src="/images/stories/sidebar/lubsym_nov11_017-crop.jpg" width="200" height="306"></div>
Any input would be nice, thank you all!
PS: unpaid internship... I don't want you guys to think I'm leaching off y'all!
As you say, your main problem is making the right column as tall as the page, i.e. extend down as far as the main content. This can be solved by adding to the CSS:
#columnrt {
width:200px;
background-color:#673601;
position:absolute;
top: 0;
right:0;
bottom:0;
}
That will make the height of the right column extend properly, allowing you to add the gradient.
use below css and one div and your assignment will be completed
td { position: relative; }
.bg-gradient { background: blue; min-height: 100%; width: 200px; position: absolute; z-index:-1; }
add this div as first child under '.columnrt'
<div class="bg-gradient"></div>
give background gradient you desire to '.bg-gradient' in css
Related
Making a portfolio, I have a very multi-layered parallax homepage and an about section below it. Trying to set it up for one page scrolling so I'm using vh, but for some reason this div just slides under the home page when being resized to the point where the height is very small. It appears as though the home page doesn't appear to push to be below it, as if it has an offset or something. Tried using clear under first div, doesn't work. Here is what it looks like: http://puu.sh/sL8Km/4cf16e2ff7.jpg
I'm assuming it's something to do with the css of the parallax, which looks like this: http://puu.sh/sL8Bb/31cca57cef.png
All of the layers of parallax look like #parabg, #scene and #home are wrappers. Any ideas? Thank you!
The miracle of finding out the problem just after you post the question. If whoever's reading this is also using a very complicated parallax and tried to follow parallax.js' poor documentation, don't use padding-top! I'll make a codepen in a bit for anyone that wants to do a fully responsive multi-layered parallax.
#parabg {
background: url(../assets/parallaximages/home/bg2.png) no-repeat 50%;
background-size: cover;
/* padding-top: 52%; */
width:110%;
height: 100vh;
margin-left:-5%;
I am using SiteBuilder to make my website marsya.com, and I inserted a code snippet into the header & body of my page (I didn't know where it should go so I put it in both places) that allows me to have a fixed background image. Hooray!
The problem is, while my navigation bar & location info are where I want them when I am zoomed at 100%, if the zoom or screen size are different my nav bar & the rest of that table row get lost in background image.
I would like them to either stay static are relative to the background (my first choice) or to just stay at the top of the page and not scroll along with the rest of my content (second choice) (I tried to post images of what I am describing, but I don't have enough reputation points)
Help! Oh, and in case you hadn't guessed by my use of SiteBuilder (and the fact that I don't know if the background image goes in the header or body), I am not a programmer. So, if you could make your advice as clear and 101 as possible, I'd appreciate it :)
marsya.com
To make an element not move along with rest of the page you need to add below styling to your .css file-
#ELEMENT-ID{
position:fixed;
}
If you look at this section below (I assume you added this code for the background image):
<style>
body
{
background-image:url('http://www.marsya.com/images/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
Change where it says:
background-position:center;
Change to
background-position:left top;
This will make the position fixed to the top left and the image won't resize when the browser is changed in size.
I am using a wordpress theme and have changed my background image.
I now want to display an image on top of the white background (where the content is displayed).
I have done this by using the following code:
img style="position: absolute; top:244px; left: 220px;" src="http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png"
This looks exactly how I want it to, but it has a problem. The site has a drop down menu, when you scroll down the menu it will disappear when your mouse moves over the image which is displayed behind.
Can anyone help me to move the image back to overlay the background on every page?
I have tried using z-index without any success.
This is the site that I want to apply the image to: http://www.tgon.co.uk/
Here is an example of the problem I am having: http://www.tgon.co.uk/info/languages/french/
Any help you could give would be greatly appreciated.
Basically, what you need to do is to:
Remove the 'position:absolute' from the image. - this is what cause you the overlapping problem.
Add 'margin-top: -107px;' to the image. - this will push the image up to where you want it.
Anyhow, I didn't understand why didn't you use 'background' css property for this.
You could have just do this:
#primary {
background: #fff url('http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png') no-repeat;
}
You have to remove this image:
And add this css:
#content {
background-image:url("http://www.tgon.co.uk/wp-content/uploads/2014/01/strans1.png");
background-repeat:no-repeat }
Here's the solution:
#branding { z-index: 1001;}
#inner-wrapper { z-index: 1000;}
Since the header is created before the #inner-wrapper div, you will need to apply a higher z-index to header compared to div#inner-wrapper`.
EDIT
Check the screenshot of the developer console view of your markup:
Just setting the z-index right for header & div#inner-wrapper did it for me.
Let's fix this then I'll be glad to help you set the image right.
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.