background for my site

  • scsiraidguru

    (@scsiraidguru)


    4 years, 10 months ago

    [ redundant link removed ]
    PHP : 8.08
    WP: 5.8

    I want to use the same background. In Elementor Style-Background Overlay I have the backup with Opacity of 0.08. How do I do the same for right sidebar, vertical header on the left, header bar and top bar?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Shahin

    (@skalanter)

    4 years, 10 months ago

    Hello @scsiraidguru,

    You can set the background image for your website from Customizing > General Options > General Styling: https://i.postimg.cc/L8qhMvyW/image.png.

    _________

    Also, you can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.

    CSS Tutorial: https://www.w3schools.com/css/
    CSS Units: https://www.w3schools.com/cssref/css_units.asp
    Responsive Sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Put your CSS on custom screen size:

    @media only screen and (max-width: 480px) {
    /* put you CSS here*/
}

    Or use between sizes:

    @media (max-width: 960px) and (min-width: 481px){
    /* put you CSS here */
}

    Best Regards

    Thread Starter scsiraidguru

    (@scsiraidguru)

    4 years, 10 months ago

    You can set the background image for your website from Customizing > General Options > General Styling: https://i.postimg.cc/L8qhMvyW/image.png.

    This sets the image around the border of the body and sidebar but not in the sidebar. I can’t control the same feature of opacity from this.

    The inspect page shows how to open inspect but not much more.

    Shahin

    (@skalanter)

    4 years, 9 months ago

    Hello @scsiraidguru,

    Sorry for the late reply

    Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    #wrap #right-sidebar-inner {
    position: relative;
}

#wrap #top-bar-wrap:before,
#wrap #site-header:before,
#wrap #right-sidebar-inner:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(https://wp.scsiraidguru.com/wp-content/uploads/2021/07/Elegant_Background-19.jpg);
    opacity: 0.08;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

    I hope it helps.

    Best Regards

    Thread Starter scsiraidguru

    (@scsiraidguru)

    4 years, 9 months ago

    [ redundant link removed ]

    That is much better but in between the sections is still blank. 

    /* Change widget color to yellow and hover to red */
aside#right-sidebar a {
    color: #eeee22;
}
aside#right-sidebar a:hover {
    color: #df3807;
}

/* Contact Info Title Email */
.contact-info-widget span.oceanwp-contact-title {
    color: #eeee22;
    font-weight: bold;
    line-height: 1.4;
}

#wrap #right-sidebar-inner {
    position: relative;
}

#wrap #top-bar-wrap:before,
#wrap #site-header:before,
#wrap #right-sidebar-inner:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(https://wp.scsiraidguru.com/wp-content/uploads/2021/07/Elegant_Background-19.jpg);
    opacity: 0.08;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s; }
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘background for my site’ is closed to new replies.