Skip to main content
mindmastery
mindmastery
Known Participant
November 23, 2018
Answered

Header Image obscured

  • November 23, 2018
  • 1 reply
  • 1552 views

Hi Guys,
Somewhere along the line I have made an amendment to the new design a guy created for me, which has caused the header image to become just a thin grey line at the top of the page, displaying the very bottom of the header image (just under the nav, at the top) as opposed to the full image taking up the top quarter of the webpage, as it used to.  https://www.mindtraining.net/website4/sports-mental-training/gymnastics-tumbling-fear.php  I am using Dreamweaver CC.   It's obviously some kind of a Style or Bootstrap issue, as the source code of the actual page does not seem to have changed.   Any thoughts would be much appreciated.     

Cheers,

Craig T

This topic has been closed for replies.
Correct answer osgood_

Well you should NOT edit the default bootstrap.css file anyway - so good thing its remote.

If you want to change the Bootstrap styling you should include the css in a 'custom' css style sheet:

Could you create a style sheet named bootstrap_custom.css and link it to your page? like below:

<link href="https://www.mindtraining.net/website4/css/bootstrap_custom.css" rel="stylesheet" />

OR you could include the css below in your 'styles.css' file:

.active {

height: 300px;

margin-top: 50px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

Failing that you could just insert the <style></style> block of css AFTER the links to your css files.

<style>

.active {

height: 300px;

margin-top: 50px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

</style>

If you do that you will see the background image again and the logo and text. Not sure if the logo and text is positioned correctly but have a look - they are side by side and maybe need to be under each other.

1 reply

O
osgood_
Legend
November 23, 2018

It looks like you are trying to do something like below? but have somehow mal-formated the code. That's easily done if you use Bootstrap as its hugely verbose  - usually far too many <divs> to cretae the simplest of components.

<section id="main-slider" class="no-margin inner-slider">

<div class="carousel slide" >

<div class="carousel-inner" >

<div class="item active">

<div class="container">

<div class="row">

<div class="col-sm-6">

<div class="carousel-content in-logo">

<img src="https://www.mindtraining.net/images/MindTraining-Logo.png" alt="" class="img-responsive in-logo" />

</div>

<!-- end carousel-content -->

</div>

<!-- end col-sm-6 -->

<div class="col-sm-6 animation animated-item-4 no-margin">

<h3 class="animation animated-item-1 ">Mental Training for<br/>

Powerful Sports Performance

</h3>

</div>

<!-- end col-sm-6 -->

</div>

<!-- end row -->

</div>

<!-- end container -->

</div>

<!-- end active -->

</div>

<!-- end carousel-inner -->

</div>

<!-- end carousel -->

</div>

<!-- end carousel-->

</section>

<!-- end main-slider-->

The 'active' container is using a background image which I have moved out of inline css styling and into a css selector (see below). Although you have some content within the carousel component which keeps the active <div> from collapsing  you might want to give it a height or some padding:

.active {

height: 300px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

mindmastery
mindmasteryAuthor
Known Participant
November 23, 2018

Thanks for your kind interest, as always, osgood - I applied the first part of your coding to the page, but it somehow is still not working for some reason - https://www.mindtraining.net/website4/sports-mental-training/gymnastics-tumbling-fear1.php     

I tried to apply the bootstrap suggestion but it tells me 'bootstrap.min.css is a remote file and cannot be edited'.

Im sure we are much closer, but not quite there yet.  Thanks again for your thoughts, and Im sure you have a viewpoint of this which is probably way above my level of understanding ; )

Cheers,

Craig T

O
osgood_Correct answer
Legend
November 23, 2018

Well you should NOT edit the default bootstrap.css file anyway - so good thing its remote.

If you want to change the Bootstrap styling you should include the css in a 'custom' css style sheet:

Could you create a style sheet named bootstrap_custom.css and link it to your page? like below:

<link href="https://www.mindtraining.net/website4/css/bootstrap_custom.css" rel="stylesheet" />

OR you could include the css below in your 'styles.css' file:

.active {

height: 300px;

margin-top: 50px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

Failing that you could just insert the <style></style> block of css AFTER the links to your css files.

<style>

.active {

height: 300px;

margin-top: 50px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

</style>

If you do that you will see the background image again and the logo and text. Not sure if the logo and text is positioned correctly but have a look - they are side by side and maybe need to be under each other.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices