Re: Updating the css file

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! 

Hi, Leo. 

If I wanted to use option #1, where should I put the <img> tag, please?

<section id="subheaderprojects">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php echo htmlencode($projects_introductionRecord['title']) ?></h1>
</div>

<!-- divider -->
<div class="col-md-12">
<div class="divider-page">
<div class="divider-img-right">
</div>
</div>
</div>

<div class="col-md-12">
<ul class="subdetail">
<li>&nbsp;</li>
</ul>
</div>
</div>
</div>
</section>

Thanks!

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!

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 :).

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 ?>

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!

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?

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!