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!
interactivetools.com
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> </li>
</ul>
</div>
</div>
</div>
</section>
Thanks!
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!
interactivetools.com
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 :).
interactivetools.com
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!
interactivetools.com
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!
interactivetools.com