Public Forums 71,145 posts

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#195716

hi,
I create modification of t3_bs3_blank template.
I want to make a one header backgroud image which will cover the entire width of the screen, and second over her which will cover the entire width of the website.
Something like the picture below:

Is it possible and how?
Thanks in advance,
Midhat

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#526584

You have to customize as follows:

+ Open the templates/t3_bs3_blank/tpls/blocks/header.php file

Change:


<header id="t3-header" class="container t3-header">
<div class="row">

<!-- LOGO -->
<div class="col-xs-12 <?php echo $logosize ?> logo">
<div class="logo-<?php echo $logotype ?>">
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img" src="<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan"><?php echo $slogan ?></small>
</div>
</div>
<!-- //LOGO -->

<?php if ($headright): ?>
<div class="col-xs-12 col-sm-4">
<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="head-search <?php $this->_c('head-search') ?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>

<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- LANGUAGE SWITCHER -->
<div class="languageswitcherload">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //LANGUAGE SWITCHER -->
<?php endif ?>
</div>
<?php endif ?>

</div>
</header>

To:

<header id="t3-header" class="t3-header">
<div class="container">
<div class="row">
<!-- LOGO -->
<div class="col-xs-12 <?php echo $logosize ?> logo">
<div class="logo-<?php echo $logotype ?>">
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image'): ?>
<img class="logo-img" src="<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan"><?php echo $slogan ?></small>
</div>
</div>
<!-- //LOGO -->

<?php if ($headright): ?>
<div class="col-xs-12 col-sm-4">
<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="head-search <?php $this->_c('head-search') ?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>

<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- LANGUAGE SWITCHER -->
<div class="languageswitcherload">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //LANGUAGE SWITCHER -->
<?php endif ?>
</div>
<?php endif ?>
</div>
</div>
</header>

+ Open the templates/t3_bs3_blank/css/template.css file

Change

.t3-header {
padding-top: 20px;
padding-bottom: 20px;
}
To

.t3-header {
padding-top: 0px;
padding-bottom: 0px;
background: red;
}
#t3-header .container {
background: yellow;
}


Let me know if it helps.

1 user says Thank You to Ninja Lead for this useful post

1. midhat

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#526610

Worked 🙂

Thanks,
Midhat

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#529602

I tried in this way to set two images in the background at the position spotight 1 (positions 1-4) and did not work. Is it possible?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#529604

Please post your site Url, that would be helpful

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#529606

http://emreza.net/web1/

[Author]

Posts