Re: Updating the css file

15 posts by 2 authors in: Forums > CMS Builder
Last Post: December 8, 2017   (RSS)

By CommonSenseDesign - December 7, 2017 - edited: December 7, 2017

In response to: [url "https://www.interactivetools.com/forum/forum-posts.php?postNum=2239733#post2239733"]Updating the css file[/url], ...

I have the following code in a stylesheet, which is to display the background image in the masthead (top) area of the page. I want to replace the ../img/bg-subheader-projects.jpg section with CMSB code.

#subheaderprojects {
padding-bottom: 70px;
background: #222;
background: url(../img/bg-subheader-projects.jpg)top fixed;
}

This is the code generated by CMSB:

<?php foreach ($projects_introductionRecord['main_image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<?php endforeach ?>

Please can you tell me how to integrate these? This is how the page is supposed to look: http://dordanmech.com/projects2.php

By leo - December 7, 2017

Hi,

You can do it in two ways:

1. instead of making the image background of the element, use <img> tag that is contained by the element to act as a background. Then you can define src for that img tag

2. move the style to the php file, and you can modify it like this:

<style>
#subheaderprojects {padding-bottom: 70px;background: #222;background: url(<?php echo $imgUrl ?>)top fixed;}
</style>

Hope it helps and let me know if you have any questions! 

Leo - PHP Programmer (in training)
interactivetools.com

By leo - December 7, 2017 - edited: December 7, 2017

Hi,

So in your example of html, I assume "#subheaderprojects" is the element needs a background. You can add an img tag anywhere under the element's child level (preferably right after the parent tag):

<section id="subheaderprojects">
  <img class="background-img" src="<?php echo $imgUrl ?>">
...
</section>

Then you can apply following styles to the wrapper and background elements:

#subheaderprojects{
  position: relative;
  overflow: hidden;
}

#subheaderprojects .background-img{
  position: absolute;
  z-index: -1;
}

Now you can choose how #background-img gets displayed and how #subheaderprojects contains it. Here is an example:

#subheaderprojects{  
  position: relative;
  overflow: hidden;
  height: 0; 
  padding-bottom: 70% /* The ratio of height / width */
}

#subheaderprojects .background-img{  
  position: absolute;  
  z-index: -1;
  width: 100%;
}

You can also make the background image height based. Let me know if you got any questions!

Leo - PHP Programmer (in training)
interactivetools.com

By CommonSenseDesign - December 8, 2017

Hi, Leo.

I tried this on a copy of my page, but the background image doesn't seem to be showing up: http://dordanmech.com/projects2.php.

I've attached the relevant files; would you be able to take a look to see where I'm going wrong, please?

By leo - December 8, 2017

Hi,

The "$imgUrl" should be replaced or assigned with the actual image URL. Depending on where you get the image from this value will be different. Let me know if you have any questions and I'm happy to help :).

Leo - PHP Programmer (in training)
interactivetools.com

By CommonSenseDesign - December 8, 2017

I replaced 

<img class="background-img" src="<?php echo $imgUrl ?>">

with 

<img class="background-img" src="<?php echo htmlencode($upload['urlPath']) ?>" />

but still no luck, I'm afraid. http://dordanmech.com/projects2.php

I also tried

<?php foreach ($projects_introductionRecord['main_image'] as $index => $upload): ?>
<img class="background-img" src="<?php echo htmlencode($upload['urlPath']) ?>" />
<?php endforeach ?>

By leo - December 8, 2017

Hi,

This is the solution:

1. set img style to be z-index: 0 and width: 100%

2. adjust parent style padding to make the image cover the background and keep the wrapper's size

Hope that helps!

Leo - PHP Programmer (in training)
interactivetools.com

By CommonSenseDesign - December 8, 2017

We're getting there! The image is showing up now - http://dordanmech.com/projects2.php - but there's a white gap above it.

2. adjust parent style padding to make the image cover the background and keep the wrapper's size

Sorry, not sure what this means?

By leo - December 8, 2017

The gap is created by padding on the wrapper element.

If you inspect the code you can see how you set the padding for the wrapper element. To remove the gap you need to remove the paddings on the element and instead set this padding as the margin of its child.

Hope that helps!

Leo - PHP Programmer (in training)
interactivetools.com