0
Welcome Guest! Login
0 items Join Now

SOLVED Possible to add background images to sections?

Last Post
Search Topic

  • SOLVED Possible to add background images to sections?

    Posted 8 years 7 months ago
    • Hi,

      I'm developing a Joomla 3.4 website with Gantry 5, Hydrogen theme. I want to be able to add a background image to an entire section for a specific theme outline. I want it to be able to span the entire section (example: feature or main) underneath the layout module positions. No matter what the browser size I want the image to cover. I know how to do this within CSS with something like:
      {
	width: 100%;
	background-image: url(/images/image.jpg); /* image */
	background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
    min-height: 500px;
}

      But I don't know how to apply this CSS to a specific section of a specific theme outline (Example: Theme Outline= Hydrogen - Page1, Section= Main). I don't want it site wide, only on one page.

      Is this possible, and if so how would I go about doing this? Thanks in advance!
    #1235839
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Possible to add background images to sections?

    Posted 8 years 7 months ago
    • If this is a site that is online (just installed, dev or live) could you please supply a link in the Public or SECURE part of your reply so we can better diagnose the issue?
      It makes our suggestions more accurate if we see the actual coding of your site.
      This is especially important with RokSprocket as our templates carry an override folder to modify the native styling.
    #1235849
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Possible to add background images to sections?

    Posted 8 years 7 months ago
    • So this is way easier using something like Chrome Developer Tools
      On the page that I need the Section background image, if I look at the <body> class I see that we're on, say "outline-11" and I want the image in the Section Showcase. Inspecting the page further I see the selector for that Section is called "section#g-showcase".
      So our total selector to this point is ".outline-11 section#g-showcase".

      Now we add that to your general background CSS to get:
      .outline-11 section#g-showcase {
	width: 100%;
	background-image: url(/images/image.jpg); /* image */
	background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
    min-height: 500px;
}

    • The following users have thanked you: John Reemtsen

    #1235854

  • Re: SOLVED Possible to add background images to sections?

    Posted 8 years 7 months ago
    • Ahhh! Beautiful! That is exactly what I needed to know. Worked perfectly. Thank you!
    #1235895

Time to create page: 0.052 seconds