Trying to add background image to bulma.io hero section, but it doesn't work!
Heres the code:
<div>
<section class="hero is-primary is-fullheight header-image">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
<!-- navbar start, navbar end -->
<div class="navbar-end">
<a class="navbar-item" href="/about">About</a>
<a class="navbar-item" href="/path">Path</a>
<a class="navbar-item" href="/blog">Blog</a>
</div>
</div>
</header>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
Title
</h1>
<h2 class="subtitle">
Subtitle
</h2>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth">
<div class="container">
<ul>
<li class="is-active"><a>Overview</a></li>
<li><a>Modifiers</a></li>
<li><a>Grid</a></li>
<li><a>Elements</a></li>
<li><a>Components</a></li>
<li><a>Layout</a></li>
</ul>
</div>
</nav>
</div>
</section>
</div>
And css code:
.header-image {
background-image: url("http://orig14.deviantart.net/7584/f/2015/181/2/7/flat_mountains_landscape_by_ggiuliafilippini-d8zdbco.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
Theres the question, why this won't work?
Everything should work as expected, there is also another one post on stackowerflow about this question, but the solution from that post also won't work!
Your code works as expected on my local environment.
The most probable reason your code is not working is because you forgot or didn't link Bulma correctly in the header.
Related
I have this icon that I want to be above my text. In this section of the website, it says, "LUNCH". In my div, if I put the image after the text, then it perfectly aligns center. However, if I put it before the text like I want it, it won't be centered anymore. I have also tried putting it in a separate div, container, and classes. Its also weird since my text is already aligning center when I haven't told it to in CSS, but it is what I want.
This allows it to center:
Here is an example image
<div class="titlecontainer">
<h1 class="title">LUNCH</h1>
<img src ="lunch.png" class= 'center'/> <!-- This allows it to center-->
</div>
This does not allow it to center:
[Here is an example image][2]
<div class="titlecontainer">
<img src ="lunch.png" class= 'center'/> <!-- This doesn't allow it to center-->
<h1 class="title">LUNCH</h1>
</div>
You can see this when you run it as a part of the full code: (I deleted the rest of the code since it was distracting)
/*title*/
.titlecontainer {
width: 70%;
margin: 0;
}
img.center {
display: block;
width: 400px;
}
img.center,
.title {
align-items: center;
}
.title {
font-family: 'Catamaran', sans-serif;
font-weight: 350;
font-size: 350%;
padding-top: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arsenal&display=swap" rel="stylesheet">
<div id="headerA">
<header>
<div class="container">
<img src="logoDE.png" alt="logo" class="logo">
<div id="myde">
<a class="a" href="https://d-e.myschoolapp.com/app#login">
<div class="myyDEcontainer">
<img src="myyDE.png" alt="myDE" class="myDE"></a>
</div>
</div>
<div id="deorg">
<a class="de" href="https://www.d-e.org" class="de">d-e.org</a>
</div>
</header>
</div>
<div class="headerB">
<header>
<div class="containerB">
<nav>
<ul>
<li><a class="a" href="ls6.html">LS + 6th Grade</a></li>
<li><a class="a" href="upms.html">MS & US</a></li>
<li><a class="a" href="staff.html">Staff Members</a></li>
<div class="dropdown">
<div class="hamburger container">
<div class="dropbtn">
<div="dropbtnicon">
<div class="iconline"></div>
<div class="iconline"></div>
<div class="iconline"></div>
</div>
<i class="fa fa-caret-down"></i>
</div>
</div>
<div class="dropdown-content">
<a class="c" href="homepage.html">Covid Home Page</a>
<a class="c" href="transportation.html">Transportation</a>
<a class="c" href="maskguidelines.html">Mask Guidelines</a>
<a class="c" href="lunch.html">Lunch</a>
<a class="c" href="maps.html">Maps</a>
<a class="c" href="emails.html">Dr. D's Emails</a>
<a class="c" href="covideducation.html">COVID-19 Education</a>
</div>
</div>
</ul>
</nav>
</div>
</header>
<center>
<div class="titlecontainer">
<img src="lunch.png" class='center' />
<h1 class="title">LUNCH</h1>
</div>
Please advise me on what to do.
This is what happened when I tried Yogesh Singh’s answer: (https://i.stack.imgur.com/Jtmgk.jpg)
[2]: https://i.stack.imgur.com/Z0ztl.png![enter image description here]
Well, the code is working for me, but the HTML syntax has a lot of errors.
The hrefs need to have %26 instead of &
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Catamaran:wght#300%26display=swap' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans%26display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arsenal%26display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="headerA">
<header>
<div class="container">
<img src="logoDE.png" alt="logo" class="logo">
<div id="myde">
<a class="a" href="https://d-e.myschoolapp.com/app#login">
<div class="myyDEcontainer">
<img src="myyDE.png" alt="myDE" class="myDE">
</div>
</a>
</div>
<div id="deorg">
<a class="de" href="https://www.d-e.org">d-e.org</a>
</div>
</div>
</header>
<div class="headerB">
<header>
<div class="containerB">
<nav>
<ul>
<li><a class="a" href="ls6.html">LS + 6th Grade</a></li>
<li><a class="a" href="upms.html">MS & US</a></li>
<li><a class="a" href="staff.html">Staff Members</a></li>
<div class="dropdown">
<div class="hamburger container">
<div class="dropbtn">
<div="dropbtnicon">
<div class="iconline"></div>
<div class="iconline"></div>
<div class="iconline"></div>
</div>
<i class="fa fa-caret-down"></i>
</div>
</div>
<div class="dropdown-content">
<a class="c" href="homepage.html">Covid Home Page</a>
<a class="c" href="transportation.html">Transportation</a>
<a class="c" href="maskguidelines.html">Mask Guidelines</a>
<a class="c" href="lunch.html">Lunch</a>
<a class="c" href="maps.html">Maps</a>
<a class="c" href="emails.html">Dr. D's Emails</a>
<a class="c" href="covideducation.html">COVID-19 Education</a>
</div>
</div>
</ul>
</nav>
</div>
</header>
<center>
<div class="titlecontainer">
<img src="lunch.png" class='center' />
<h1 class="title">LUNCH</h1>
</div>
</center>
This code does seam to work.
Firstly, you said that text gets centered even though you haven't added any such css which is wrong. You've following CSS for the text "LAUNCH":-
img.center,
.title {
align-items: center;
}
Now, making the image center, you've to change the CSS of div wrapping the img tag as follows:
.titlecontainer {
width: 70%;
margin: 0;
display: grid;
justify-content: center;
}
Or
You can use display: flex
Or
Giving text-align: center property to the wrapper div will work because text-align property works on block containers and div is a block container. Hence, text-align: center to wrapper div will make the image and text center aligned.
there's also an easy way to do this, just replace text-align:
White row appeared below main menu and above jumbotron on a drupal site. I am unable to remove it.
I think that it is css problem but I can't find what exactly causing it. Here is the link to codepen: https://codepen.io/lomachx/pen/WNbLgYa
<body class="html front not-logged-in no-sidebars page-node i18n-ru">
<div id="skip-link" class="skip-link">
Skip to main content
</div>
<div class="menu-wrap">
<div class="full-wrap logo-wrap"><!--c-->
<div id="logo">
<img src="img/logo.png"/>
</div>
<h1 id="site-title">
Cool Site
</h1>
<nav id="main-menu" role="navigation">
<a class="nav-toggle" href="#">Navigation</a>
<div class="menu-navigation-container">
<ul class="menu"><li class="first leaf">Main</li>
<li class="leaf">Articles</li>
<li class="last leaf">About</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="header"><!--c-->
<div class="homebanner">
</div>
<!--New navbar -->
<div>
<nav class="navbar-lower" role="navigation">
<div class="region region-second-menu">
<div id="block-system-navigation" class="block block-system block-menu">
<div class="content">
<ul class="menu">
<li class="first last leaf">Главная</li>
</ul>
</div>
</div> <!-- /.block -->
</div>
</nav>
</div>
</div>
<div class="bckgr-wrap">
<div><H1>Nest</H1></div>
</div>
</body>
</html>
Change body margin-top:50px to the height of your header like below
css
body {
color: #333;
background: #fff;
background-size: cover;
font-family: 'Philosopher', sans-serif;
font-size: 14px;
line-height: 180%;
margin-top: 35px;
}
I'm having trouble making my footer stay at the bottom of my page. I don't want it to be fixed when scrolling, just when the user reaches the bottom of the page. I think it has something to do with my grid.
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>The Developer</li>
<li>Contact</li>
</ul>
<h1>Welcome to the City of Melbourne!</h1>
<h2 style="margin-bottom: 50px;">Where would you like to go?</h2>
<div class="col_contain">
<a href="frederation/frederationsquare.html"><div class="container">
<img src="http://rmitcatalyst.com/wp-content/uploads/2013/03/Fed-Square.jpg" alt="Frederation Square" class="image">
<div class="middle">
<div class="text">Federation Square</div>
</div>
</div></a>
<a href="chinatown/chinatown.html"><div class="container">
<img src="http://www.whitehat.com.au/images/melbourne/CTown.jpg" alt="Chinatown" class="image">
<div class="middle">
<div class="text">Chinatown</div>
</div>
</div></a>
<a href="library/library.html"><div class="container">
<img src="https://www.slv.vic.gov.au/sites/default/files/styles/feature_image/public/strategic-plan-hero.jpg?itok=CCmv7jIG" alt="State Library" class="image">
<div class="middle">
<div class="text">State Library of Victoria</div>
</div>
</div></a>
<a href=""><div class="container">
<img src="http://www.mymarketsvic.com.au/directory/files/logo/58.jpg" alt="South Melbourne Market" class="image">
<div class="middle">
<div class="text">South Melbourne Market</div>
</div>
</div></a>
<a href="shrine/shrine.html"><div class="container">
<img src="https://thumbs.dreamstime.com/b/shrine-remembrance-melbourne-australia-july-bright-flowers-below-victoria-memorial-to-58139919.jpg" alt="Shrine of Remembrance" class="image">
<div class="middle">
<div class="text">Shrine of Remembrance</div>
</div>
</div></a>
<a href=""><div class="container">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/12/35/7f/fd/ngv-triennial-skull-room.jpg" alt="NGV" class="image">
<div class="middle">
<div class="text">National Gallery of Victoria</div>
</div>
</div></a>
</div>
</body>
<footer style="background-color: white;">
Created by Carisa Atmarini
</footer>
I have tried doing this but it became positioned above the body instead of being at the bottom. If anyone has a clue, please let me know.
Here's my codepen link for the full page:
https://codepen.io/codecarisa/pen/pZoXYW
I think the main issue is .col_contain: remove the height.
Also remove position: absolute on the footer, and make sure the footer is inside the body.
And change the padding on the body:
body { padding-bottom: 0; }
I need to appear the header background color only when the mouse pointer touching the header, or clicking any part of the body.
Otherwise I need a hidden header background color.
<body>
<div id="wrapper">
<div id="header">
<a style="text-decoration:none" href="#" target="_blank">about.me</a>
<button class="button">Log In </button>
<button class="button">Create your page!</button>
</div><!-- #header -->
<div id="content">
<div id="image">
<center><img src="../../../../../wamp/www/check_php/IMG_9079.JPG"></center>
<div class="clear_both" /> </div>
<div class="sub">
<p align="center"><button class="button2">View my photos</button></p>
<div class="clear_both" /> </div>
<p align="left">This is the power of a common man</p>
</div>
</div><!-- #content -->
<div id="footer">
<p>Introduce yourself with a free, one-page website.
<button class="button1">Get Started </button></p>
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
add a class to your in html:
<div id="header" class="header_navi">
<a style="text-decoration:none" href="#" target="_blank">about.me</a>
<button class="button">Log In </button>
<button class="button">Create your page!</button>
</div><!-- #header -->
add this to your css:
.header_navi {
background-color:transparent;
}
.header_navi:hover {
background-color:red;
}
My main goal is to create a btn that play/pause the song on my wedding site.
I got it to work on the desktop view port, but not on the phone.
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this
So far so good, everything work perfectly fine.
Here come the issue, here what it look like on the 400px
I see it, but, they're not clickable at all.
I tried to inspect it, this is what I see.
I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work.
I'm a little stuck now, please feel free to give me any suggestions.
HTML
<!--Header start -->
<header>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper" id="navbar">
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music">
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
</div>
{{-- Music --}} -------------------------------------------------
<div class="container">
<!--Logo -->
<div class="logo">
<img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="logo_phone hidden">
<img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navigation">
<li class="menuItem" id="home">Home</li>
<li class="menuItem">Count Down</li>
<li class="menuItem">Couple</li>
<li class="menuItem">Events</li>
<li class="menuItem">Gallery</li>
<li class="menuItem">Accommodation</li>
<li class="menuItem">RSVP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
<!--video header start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
<!--background slide show start-->
<div class="slide into_firefly">
<!--header text1 start-->
<div class="container hedaer-inner ">
<div class=" bannerText clearfix ">
<h1>Long & Roth</h1>
<h4>WE ARE GETTING MARRIED</h4>
<p class="ruler"><span></span>
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
<span></span></p>
<h4 class="date long">July 26th, 2016</h4>
<h4 class="date short">-07.26.2016-</h4>
</div>
<p class="downArrow"><i class="fa fa-chevron-down"></i></p>
</div>
<!--header text end-->
<img src="/img/love/main/edit/retina.jpg" alt="Main Image">
</div>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
</header>
<!--Header end -->
Remove the part where you have set the logo to z-index: 9999
Then add this to your css
.navbar-header button{
float:right;
}
It is a z-index issue, but z-index is tricky and only works when the elements have a position other than static (which is default).
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
...
</div>
{{-- Music --}} -------------------------------------------------
<div class="container" style="position:relative; z-index:98">
...
</div>
(I put the styling inline for clarity)
There are likely other way to fix this, but this was the quickest.
Pull the button outside of .navbar-wrapper and put it as the first element under .menu
That'll work :)