Hey so I am trying to inject a background image to my Django template however for some reason I do not know why it not loading I tried inline styling on the html(** ) tag but nothing
I the tried to to make an external css file but still not working can you please show me what I can be possibly doing wrong here.
** Below is the code to my html tag that I want to put the background image to**
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate">
<h2 class="subheading">Leave the house cleaning chores to us</h2>
<h1 class="mb-4">Let us do the dirty work, so you don't have to.</h1>
<p>Learn more <span class="ion-ios-arrow-forward"></span></p>
</div>
</div>
</div>
</div>
And here below is the external css file that I made to test if it would work having an external stylesheet
.hero-wrap js-fullheight{
background-image: url('static/images/bg_1.jpg');
}
If possible can you teach me how I can make inline background-image on the html tags using Django templates
try this:
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5" style="background-image: url({% static '/images/bg_1.jpg' %});">
Related
Good evening, I'm a novice at applying styles, well my problem is that I have the following slider, and I want to add opacity to it.
<div class="single-hero-slide bg-img" style="background-image: url(img/slider/slider4.jpg);">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="hero-slides-content">
<h4 data-animation="fadeInUp" data-delay="100ms">All the courses you need</h4>
<h2 data-animation="fadeInUp" data-delay="400ms">Wellcome to our <br>Online University</h2>
Read More
</div>
</div>
</div>
</div>
</div>
I would like you to help me with the css code.
I don't recommend inline styles which is what you have included, as it's not maintainable. To add a css file to your project make a new css file (preferable called main.css and then link to it using <link rel="stylesheet" href="*"> Paste this code in to the header of your html and then change the * to the file location. Next you can reference the slider classes, in your case you would type .container h-100{} and then within the curly braces type opacity: ; and in between : & ; write
any number on a scale of 0 ~ 1. An opacity of 0 will be invisible and an opacity of 1 will be completely visible. Hope this answered your question!
I included the following link in the head section of my html page but the animation is not working:
An animated element I tried this and it is working. Do I need to write animate__animated instead of only animated ?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
I also added bootstrap links in my original code. Bootstrap links are working but not animation. Is there any other link need to add?
<div class="container">
<header class="animated slideInDown text-center text-white p-5">
<h1 class="display-4"> Using Animation! </h1>
</header>
</div>
All you need to do is to call the right classes for it to work and activate.
you must call animate__animated and just copy the effect from their website and paste it and it should work.
Note that when I copied their class it was animate__slideInDown not slideInDown.
<div class="container">
<header class="animate__animated animate__slideInDown text-center p-5">
<h1 class="display-4"> Using Animation! </h1>
</header>
</div>
It could be that for some animations you need all librarys from bootstrap (also js und jquery)
also bootstrap has no animations
what you mean is mdboostrap
try following this guid -> https://mdbootstrap.com/md-bootstrap-cdn/
I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.
I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>
My Angular Version: Angular 7
I just started learning Angular and I'm trying to use a downloaded Bootstrap template in my Angular project. My owl-carousel works great when it's on index.html in my Angular project. But it does not when it's moved to a new component. I'll be providing the steps I followed. Kindly help me troubleshoot
Step 1: I copied all assets (JS, CSS & Images) to the assets folder under src in Angular
Step 2: Copies the code in index.html in the template to the angular index.html and changed the 'src' for images and JS files in index.html
At this point, everything works PERFECT!
Step 3: Since it's not a good practice to keep everything in one file so I tried to refactor the code by moving the home-slider which is based on 'owl-carousel' to a component called 'home' as below
Below is the entire code in home-component.html and all imports such as Javascript and CSS are already in index.html of my Angular Project
<!-- Welcome Area Start -->
<section class="welcome-area">
<div class="welcome-slides owl-carousel">
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInLeft" data-delay="200ms">Creativity & Excellence</h6>
<h2 data-animation="fadeInLeft" data-delay="500ms">Welcome to to my Web</h2>
Explore our work
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInDown" data-delay="200ms">Hotel & Resort</h6>
<h2 data-animation="fadeInDown" data-delay="500ms">Welcome To my Web </h2>
Discover Now
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I expected the code to have a working owl-carousel slider when the component is selected in app-component.html using <app-home></app-home> but the actual output just gives nothing.
Note: The selector is right as if I give plain text and call the selector as <app-home></app-home> in app-component.html it works but not the owl-carousel
Thanks in advance.
when are you initialising the owl carousel? because index page loads with the application and hence its working in index, but component page only loads when its navigated so you need to call owl initialising explicitly after component is loaded into DOM
$(".owl-carousel").owlCarousel();