Background

josh0907
(@josh0907)

8 years, 1 month ago

Hi, I have created a background image that scrolls, but I do not know how to make the white screen in front dissappear without losing my logo and my menu. Is this possible?

http://d52.221.myftpupload.com/

Viewing 12 replies - 1 through 12 (of 12 total)

Nisha
(@nishasingh)

8 years, 1 month ago
Hi,

It’s happening because of site-inner position: relative;
use position: absolute; as like below. After using the ‘position: absolute;’ it will look like https://www.screencast.com/t/iM1PWdks
```
.site-inner {
    margin: 0 auto;
    max-width: 1320px;
    position: absolute;
```
[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]
- This reply was modified 8 years, 1 month ago by bdbrown.
Thread Starter josh0907
(@josh0907)

8 years, 1 month ago

Thank you, that got rid of the white box, but now when I click on the home button on my menu (or leave the home page and come back), the menu moves to beneath the logo. Is there anyway to fix that? Also, I assume I need to use some type of photo editing software to get my logo to be transparent?
Nisha
(@nishasingh)

8 years, 1 month ago
Make padding: 0em 4.5455%; of
```
@media screen and (min-width: 61.5625em)
.site-header {
    padding: 5.25em 4.5455%;
}
```
You can find the online photo editor as like http://www.online-image-editor.com/help/transparency
Use Photoshop software on your machine to edit the photos.
- This reply was modified 8 years, 1 month ago by Nisha.
- This reply was modified 8 years, 1 month ago by bdbrown.
Thread Starter josh0907
(@josh0907)

8 years, 1 month ago

Thank you so much for the help. That doesnt seem to be keeping the menu to the right, am I adding that code to the custom css on my home page? Also, i would like to move the logo up slightly, do you know how I would do that?
Nisha
(@nishasingh)

8 years, 1 month ago
make “position: absolute !important;” as like below.
```
.site-inner {
    margin: 0 auto;
    max-width: 1320px;
    position: absolute !important;
}
```
and for reducing the padding top, write following css
```
@media screen and (min-width: 61.5625em)
.site-header {
    padding: 0px 4.5455%;
}
 if top padding not reducing use  
.site-header {
    padding: 0px 4.5455% !important;
}
```
[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]
- This reply was modified 8 years, 1 month ago by bdbrown.
Thread Starter josh0907
(@josh0907)

8 years, 1 month ago

Thank you, that moved the logo up perfectly, but the menu is still shifting when i leave the home screen and come back, when i add !important i get a yellow triangle that says “Use of !important”
Nisha
(@nishasingh)

8 years, 1 month ago
Do this minor CSS change as like below
```
@media screen and (min-width: 61.5625em)
.site-header {
    padding: 0px 4px; !important;
}
```
[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

You can change the 4px to 5px as you wish.
- This reply was modified 8 years ago by bdbrown.
Thread Starter josh0907
(@josh0907)

8 years, 1 month ago

I very much appreciate your help, but the menu still moves when I leave the home page and come back. It moves to the bottom of the logo.
Thread Starter josh0907
(@josh0907)

8 years ago
Hello, i am still unable to keep the menu from dropping to below the logo when the home page is refreshed. Any other advice? Here is the CSS coding I have on the home page.
```
.site-inner {
    margin: 0 auto;
    max-width: 1320px;
    position: absolute
}
.site-header {
    padding: 1.25em 6.5455%;
}
```
[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]
- This reply was modified 8 years ago by bdbrown.
- This reply was modified 8 years ago by bdbrown.
bhagyashreen
(@bhagyashreen)

8 years ago
Hello,

Solution for this
Replace padding with
```
@media screen and (min-width: 61.5625em)
style.css?ver=4.7.5:3404
.site-header {
    padding: 0em 4.5455%;
}
```
AND
Remove this
```
.vc_custom_1495855846819 {
    margin-top: -80px !important; 
}
```
[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

(make margin 0px or remove this totally)
- This reply was modified 8 years ago by bdbrown.
Thread Starter josh0907
(@josh0907)

8 years ago

Thank you for the response. This took away the full screen scrolling image I had. The home page is set the way I want it right now with the exception of the menu moving when I refresh the page. Is there a way to make the menu stay on the top right instead of moving beneath the logo everytime the page is refreshed?

Thread Starter josh0907
(@josh0907)

8 years ago

Does anyone have any advice on how to accomplish the full screen image, but to stop the menu from moving every time the page is refreshed?