This works for my homepage to make a image fit my background.
<body>
<div style="height:100%; background-image:url(location.png); background-size:cover;">
<?php include("homebuttons.php");?>
</div>
</body>
But doesn't seem to want to work in this one
<body>
<div style="height:100%; background-image:url(location.png); background-size:cover;">
<div class="navbar">
<?php include("navbar.php"); ?>
</div>
<div id="content">
<?php include("pages/" . $_POST["var"] . ".php"); ?>
</div></div>
</body>
I've tried positioning the DIV in different location, but still nothing. All I need is a background for certain page. I plan on using this code after I finish.
<div style="height:100%; background-image:url(<?php echo $_POST["var"] ?>.jpg); background-size:cover;">
the problem is the style="height:100%; in you div, when you define height:100% this 100% refers to the element parent size and not the viewport size. this works only for the width, you'll need the set the min-height with a px size to get this working.
For some reason when you have
<!DOCTYPE html>
in the document this 100% fit will not work. Weird.
Related
I am trying to figure out why my image won't add to the WordPress website I am creating. This course came with other images that will display but not the ones I add as a jpg file. I am not sure why it will add the other jpg images but not the ones I want. Here's my code:
<?php get_header(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo
get_theme_file_uri('images/traffic.jpg') ?>)"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">TBS</h1>
<h2 class="headline headline--medium">Working to make traffic safer</h2>
<h3 class="headline headline--small">Explore constructing, utlities, and other types of work we do</h3>
Service & Support
Signs
Utilities
</div>
</div>
I am not sure if I need to add more information to this.
Try this:
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo
get_theme_file_uri('images/traffic.jpg'); height:200px;width:100% ?>)"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">TBS</h1>
<h2 class="headline headline--medium">Working to make traffic safer</h2>
<h3 class="headline headline--small">Explore constructing, utlities, and other types of work we do</h3>
Service & Support
Signs
Utilities
</div>
</div>
Problem is that you are closing <div> tag without adding any content in that:
<div class="page-banner__bg-image" style="background-image: url(<?php echo
get_theme_file_uri('images/traffic.jpg') ?>);"></div>
So I have added height and width for showing the background image. Either you can add some content or specify the height and width of that div.
I figured it out. I added the image to my image folder but it wasn't refreshed in VS editor. If you add images to a folder, make sure to refresh the image folder.
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I'm building a custom wordpress theme and I was watching my buddy write up code for a page using bootstrap. He made it so that it is centered on his monitor. I believe he is using a 4:3 monitor. When I look at the page on my 24inch widescreen the page is not centered. What am I doing wrong that is making the page not responsive to any screen size? This is my code for the page:
<?php get_header(); ?>
<div class="row">
<div class="span1"></div>
<div class="span8" id="container">
<?php the_post(); ?>
<?php the_content(); ?>
</div>
<div class="span2">
<?php get_sidebar();?>
</div>
<div class="span1"></div>
</div>
<?php get_footer(); ?>
and here is the code for the header:
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<center>
<div class="row">
<div class="span3"></div>
<div class="span6">
<div class="logo">
<h1 id="logo-mathew">Mathew J. Mari</h1>
<h3 id="logo-attorney">Attorney At Law</h3>
</div>
</div>
<div class="span3"></div>
</div>
</center>
I am new to using bootstrap so maybe I'm using the wrong syntax for it to be responsive or I've left something out? I just want it to be responsive on all monitors, having it centered and utilizing a 1-8-2-1 column layout. Any help would be greatly appreciated.
It does seem like you are using an older version of Bootstrap. The Newer version mnakes it much easier to center your elements.
Your code with the elements being used inside a container class. One of bootstrap's 3 easier method of centering a div.
And with the new bootstrap, the use of class names like col-md-1 , col-md-8 etc will be used. Make sure you read up on Bootstraps' grid system. Makes life much easier for responsive designs
<div class="container">
<div class="row">
<div class="col-md-1"></div>
</div>
<div class="container">
<div class="col-md-8">
<?php the_post(); ?>
<?php the_content(); ?>
</div>
<div class="col-md-2">
<?php get_sidebar();?>
</div>
<div class="col-md-1"></div>
</div>
container tag is missing must be used over the row and all other tags
Use .container for a responsive fixed width container.
...
Use .container-fluid for a full width container, spanning the entire width of your viewport.
...
Firstly you are using the old version of Bootstrap i.e 2.3 and bootstrap has already released the new version 3.0 so please upgrade it.
Now in the version you are using, there is another css that you need to give reference and that is for the responsive. and also add the .container-fluid for your main container.
Add Class .col-centered to your page wrapper div
.col-centered{
margin:0 auto;
float : none;
display:block;
}
it centered your page in any size monitor
I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>
So I want to position my a meta-data div in the corner of every post image, but all the images are different sizes. How do I do this?
Heres an example of what I need:
This is the loop:
<div id="images">
<?php wp_get_attachment_image(); ?>
</div>
<div id="date">
<?php get_the_date(); ?>
</div>
I posted this # wordpress.stackexchange but they said to post it here
It doesn't matter what size the image is. You have to give the container div a position:relative and the corner div a position:absolute with top:0 and left:0
HTML:
<div id="images"><?php wp_get_attachment_image(); ?>
<div id="date"><?php get_the_date(); ?></div>
</div>
*note date is inside the image tag!
CSS:
#images{
position:relative;
}
#date{
position:absolute;
top:0;
left:0;
}